How to properly create an alert-box with Javascript?

Question

I'm trying to use jQuery to open a Foundation alert-box on the fly. When I attempt to do so, the behavior of the close link is somewhat inconsistent. If there already is an alert-box on the page, then the close link works. However, if the box that I create via JS is the first one on the page, the close link doesn't work. I'm using Foundation 5.4.5.

Simple demo of what I'm trying to do:

HTML:

<a id="add">Add message</a>

JS:

$("#add").click(function(event) {
   $("body").append("<div class=\"alert-box\" data-alert>Dynamic alert<a class=\"close\">&times;</a></div>");
});

Codepen: http://codepen.io/dgross/pen/myyerB

However, modifying the HTML to include a separate alert makes them both work:

<a id="add">Add message</a>
<div class="alert-box" data-alert>
...etc

Codepen: http://codepen.io/dgross/pen/qEEOqN

Is there an official way of doing this that I'm missing? I've also tried triggering the 'open.fndtn.alert-box' event which doesn't seem to do anything.

Answer 1

I just dug in the source code and found a function called reflow. Modifying my JS to the following solved the issue:

$("#add").click(function(event) {
   $("body").append("<div class=\"alert-box\" data-alert>Dynamic alert<a class=\"close\">&times;</a></div>");
   $(document).foundation('alert','reflow');
});