javascript - 全部或部分重新加载基础

Question

在我的网站中，主 index.php 有一个下拉菜单，如果我点击一个项目，Ajax 加载器工作并写入主索引的主 div。

但如果此导入使用基础功能(显示、标注、制表符...)，则此导入不起作用。

如果在 Web Explorer 控制台中我再次插入此命令 '$(document).foundation();'，导入工作正常但我在日志中收到警告

Tried to initialize drill down on an element that already has a Foundation plugin. foundation.min.js:65 Tried to initialize dropdown-menu on an element that already has a Foundation plugin.foundation.min.js:65

Tried to initialize off-canvas on an element that already has a Foundation plugin.foundation.min.js:65

Tried to initialize responsive-toggle on an element that already has a Foundation plugin.foundation.min.js:65

Tried to initialize reveal on an element that already has a Foundation plugin.

有人可以帮我找到一个干净的解决方案来重新加载基础吗？

Answer 1

在 Foundation 6.2.3 中，

$(document).foundation() 

会打电话

reflow: function(this, plugins) 

插件未定义，因此将检查每个插件:该函数将查看 $(document) 的每个具有 [data-plugin_name] 属性的子元素，如果该元素已经初始化则显示此警告:

if ($el.data('zfPlugin')) {
    console.warn("Tried to initialize " + name + " on an element that already has a Foundation plugin.");
    return;
}

因此您可以在 ajax 请求后直接在新元素上调用 foundation() :

$('#your_element').foundation();

或者用指定的插件调用reflow(例如reveal)

Foundation.reflow($('document'), 'reveal')

前提是您的 DOM 中还没有初始化的“显示”元素

混合:(我认为最好的解决方案)

Foundation.reflow($('#your_element'), 'reveal');