全部或部分重新加载基础

Question

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

但是如果这个导入使用基础功能（显示，标注，制表符......），则此导入不起作用。

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

试图初始化已经具有Foundation插件的元素的向下钻取。 foundation.min.js：65试图初始化已经有一个Foundation plugin.foundation.min.js的元素的下拉菜单：65

试图在已经有一个Foundation plugin.foundation.min.js：65的元素上初始化非画布

试图初始化已经有一个Foundation plugin.foundation.min.js的元素的响应式切换：65

试图在已经有一个Foundation插件的元素上初始化揭示。

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

Answer 1

在Foundation 6.2.3中，

$(document).foundation() 

将会通知

reflow: function(this, plugins) 

插件未定义，因此将检查每个插件：该函数将使用[data-plugin_name]属性查看$（document）的每个子节点，如果该元素已经初始化，则显示此警告：

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

所以你可以在你的ajax请求之后直接在new元素上调用foundation（）：

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

或使用指定的插件调用reflow（例如显示）

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

如果你的DOM中还没有初始化的'reveal'元素

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

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

Answer 2

首先，不要多次打电话给$(document).foundation();。

如果您已更新已使用插件初始化的元素，则需要使用reInit。

如果您已添加或完全替换了具有新元素的元素，则需要使用$(element).foundation();

我使用以下技术：

首先，当基础初始化时，我存储一个全局：

$(document).foundation();
__foundationRun = true;

然后，无论何时，以下util将处理新/更新元素的初始化：

function foundationUpdate(el) {
    if (__foundationRun) {
        if (el.data('zfPlugin'))
            // existing element already has a plugin - update
            Foundation.reInit(el);
        else
            // new element - initialize
            el.foundation();
    }
    // else leave for foundation to init
}

所以你可以像这样使用：

$(".accordion").append("<li>Item</li>");
foundationUpdate($(".accordion"));

要么

var newAccordion = $("<ul class='vertical menu accordion-menu'"
    + " data-accordion-menu><li>Item</li></ul>");
$(".container").append(newAccordion);
foundationUpdate(newAccordion);

Answer 3

删除或注释掉这个

$(document).foundation();

至

// $(function(){ $(document).foundation(); });