Question

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

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

如果在网络浏览器控制台中我再次插入此命令'$(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')

如果您还没有初步显示＆＃39;揭示＆＃39; DOM中的元素

混合:(我认为是最佳解决方案）

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(); });

全部或部分重新加载基础

3 个答案: