javascript - 将 ZURB Foundation 下拉插件绑定(bind)到动态插入的元素

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

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

Answer 1

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

To be even more efficient "target the actual type of foundation item you need to 'reflow' $(document).foundation('orbit', 'reflow');"

(我引用自:http://foundation.zurb.com/forum/posts/1766-reflow)