更新已有插件的元素

Question

Zurb 基金会 6.5.3

我有一个手风琴菜单，需要在初始页面加载后通过 ajax 进行更新。所以最初菜单包含 2 个项目，然后 $(document).foundation(); 被调用。稍后在收到 ajax 响应后，将在菜单中添加元素（并且可能 removed/replaced）。

我希望能够重新使用相同的元素，但是我无法更新插件来重新设置更改后的元素的样式。我试过：

$("#my-menu").foundation(); 不起作用并显示错误：

Tried to initialize accordion-menu on an element that already has a Foundation plugin.
Foundation.reflow(menu, 'accordion'); 这行不通。
menu.foundation('reflow'); 不起作用并显示错误：

Uncaught ReferenceError: We're sorry, 'reflow' is not an available method for AccordionMenu.

我通过销毁和删除现有菜单，重新创建整个菜单，然后调用 $("#my-menu").foundation(); 使其工作，但我认为这并不理想。

Answer 1

我发现我的问题是由于没有一种解决方案适用于所有 3 种情况：

基础尚未初始化
基础已初始化，整个元素已被替换，因为
基础已初始化，元素已更新

除非有人有更好的答案，否则我用这种方法解决了：

// this can happen before, or after code creates the menu
$(document).foundation();
console.log("foundation run");
__foundationRun = true;


...


function foundationUpdate(el) {
    if (__foundationRun) {
        if (el.data('zfPlugin'))
            // already initialised, update it
            Foundation.reInit(el);
        else
            // new element, initialise it
            el.foundation();
    }
    // else leave for foundation initialise
}

....

// ... do updates (modify or replace entirely) and then:
foundationUpdate($("#my-menu"));

更新已有插件的元素

Update an element that already has a plugin

zurb-foundation