将ZURB Foundation下拉插件绑定到动态插入元素

Question

我有一些客户端JavaScript，它们可以动态地将一些元素插入到DOM中。那些元件使用包含标记为下拉元件的Dropdown plugin：

<p> 
    <a 
    id="resource-upload-label-1234" 
    href="#invalid-resource-1234" 
    class="label alert" 
    data-dropdown="invalid-resource-1234" 
    data-options="is_hover:true" 
    > 
    Invalid 
    </a> 
</p> 
<div id="invalid-resource-1234" class="f-dropdown content" data-dropdown-content> 
    <h4>Invalid File</h4> 
    <p> 
    This file is not a supported file type. 
    </p> 
</div> 

的问题是，下拉插件未检测该新元素，所以它不加入下拉行为的新的元素。

作为一个测试，我尝试直接在HTML源码中对HTML进行硬编码，并且在该上下文中下拉加载正常。所以我有基金会和下拉插件配置正确。它只是没有将功能绑定到动态生成的元素上。

是否有一段JavaScript可以运行以将下拉功能绑定到#resource-upload-label-1234？我正在查看该插件的源代码，而且我不知道如何执行此操作。

Answer 1

我刚刚发现的一个解决方案是在插入新元素后再次调用$(document).foundation();。

我不确定这是否是“正确的方式”，但它的工作原理。如果有人知道更合适的解决方案，不要害羞，并将其作为答案！

根据comment on zurb/foundation#3885，似乎再次调用foundation()不应引起任何问题，并且可能foundation()被设计为以这种方式使用。

Answer 2

为了提高效率，你可以使用$(document).foundation('reflow');

为了更加高效“目标的实际类型基金项目的 你需要‘回流’的$（document）.foundation（‘轨道’，‘回流’ ）;”

：

（http://foundation.zurb.com/forum/posts/1766-reflow我从引用）