Question

我正在尝试使用jQuery动态打开Foundation警报框。当我尝试这样做时，关闭链接的行为有些不一致。如果页面上已有警报框，则关闭链接有效。但是，如果我通过JS创建的框是页面上的第一个框，则关闭链接不起作用。我正在使用Foundation 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>");
});

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

但是，修改HTML以包含单独的警报会使它们都起作用：

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

Codepen：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');
});

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

1 个答案: