全部或部分重新加载基础答案

【问题标题】：Reload foundation all or partially全部或部分重新加载基础
【发布时间】：2016-07-05 14:02:53
【问题描述】：

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

但如果此导入使用基础功能（显示、标注、选项卡..），则此导入不起作用。

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

尝试初始化已具有 Foundation 插件的元素的向下钻取。 foundation.min.js:65 尝试在已经有 Foundation 插件的元素上初始化下拉菜单。foundation.min.js:65

尝试在已经有 Foundation plugin.foundation.min.js:65 的元素上初始化画布外

试图在一个已经有 Foundation plugin.foundation.min.js:65 的元素上初始化 responsive-toggle

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

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

【问题讨论】：

标签： javascript ajax zurb-foundation

【解决方案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 请求之后直接在新元素上调用foundation()：

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

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

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

如果你的 DOM 中还没有初始化的“显示”元素

混合：（我认为最好的解决方案）

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

【讨论】：

不确定 6.2，但 6.5“回流”不再。也许reInit 合适？

【解决方案2】：

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

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

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

我使用以下技术：

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

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

然后，无论何时，以下工具都会处理新/更新元素的初始化：

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

【讨论】：