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('reflow');

更高效＆＃34;针对基础项目的实际类型你需要回流＆＃39; $（document）.foundation（＆＃39; orbit＆＃39;，＆＃39; reflow＆＃39;）;＆＃34;

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

Answer 2

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

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

根据comment on zurb/foundation#3885，似乎再次调用foundation()不会导致任何问题，并且foundation()可能会以这种方式使用。

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

2 个答案: