如何使用Javascript正确创建警报框

Question

我正在尝试使用jQuery即时打开基金会警报框。当我尝试这样做时，紧密链接的行为有些不一致。如果页面上已经有一个警报框，则关闭链接有效。但是，如果我通过JS创建的框是页面上的第一个框，则关闭链接不起作用。我正在使用基础 5.4.5。

我正在尝试做什么的简单演示：

.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>");
});

代码笔：http://codepen.io/dgross/pen/myyerB

但是，修改 HTML 以包含单独的警报使它们都有效：

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

代码笔：http://codepen.io/dgross/pen/qEEOqN

有没有我缺少的官方方法？ 我还尝试触发"open.fndtn.alert-box"事件，该事件似乎没有任何作用。

Answer 1

我刚刚挖掘了源代码，发现了一个名为 reflow 的函数。将我的JS修改为以下内容解决了该问题：

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