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

【问题标题】：Binding ZURB Foundation dropdown plugin to dynamically-inserted element将 ZURB Foundation 下拉插件绑定到动态插入的元素
【发布时间】：2014-01-08 13:27:51
【问题描述】：

我有一些客户端 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 进行硬编码，并且下拉菜单在该上下文中加载正常。所以我正确配置了 Foundation 和下拉插件。它只是没有将功能绑定到动态生成的元素。

是否可以运行一些 JavaScript 来将下拉功能绑定到 #resource-upload-label-1234？我正在查看插件的源代码，但我不清楚如何执行此操作。

【问题讨论】：

标签： javascript drop-down-menu zurb-foundation

【解决方案1】：

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

为了更高效“针对基础项目的实际类型你需要'reflow' $(document).foundation('orbit', 'reflow');"

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

【讨论】：

【解决方案2】：

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

我不确定这是否是“正确的方法”，但它确实有效。如果有人知道更合适的解决方案，请不要害羞，并将其作为答案发布！

根据comment on zurb/foundation#3885 看来，再次调用foundation() 应该不会造成任何问题，也许foundation() 就是为了这样使用而设计的。

【讨论】：