在回调中重新初始化 jquery 手风琴答案

【问题标题】：re-initialize jquery accordion on callback在回调中重新初始化 jquery 手风琴
【发布时间】：2009-08-19 18:27:49
【问题描述】：

我的手风琴在页面加载时工作正常，但是在用户与页面上的某些元素交互时，我正在使用 ajax 来重建手风琴的 HTML。然后，我尝试使用

再次重新初始化手风琴

    $('#accordion').accordion({
        active: false,
        autoHeight: false,
        clearStyle: true,
        collapsible: true,
        header: 'h3'
    });

但是……好像没用。

渲染 HTML 的新块没有应用手风琴规则。相反，它只是作为一个大列表保持打开状态。

我什至尝试使用 setTimeout() 重新调用手风琴，以防它在回调中返回渲染的 HTML 之前尝试初始化。

回调中呈现的 HTML 与页面加载的 HTML 完全相同（Accordion 方法生效时发生的 DOM 添加除外）

【问题讨论】：

标签： jquery callback rendering accordion

【解决方案1】：

在使用数据重新填充之前销毁手风琴。

$('#accordion').accordion('destroy');

【讨论】：

没问题。我在对话框 UI 组件上遇到了完全相同的问题，修复方法也是一样的。您必须显式地销毁 jquery-ui 中的所有内容（暂时）以使组件处于良好状态。这应该记录在某处！

【解决方案2】：

我打电话给任何更改：

$('#accordion').accordion( "refresh" )

您应该避免在每次更改时破坏和创建手风琴，这没有意义，而且对性能不利。

这适用于所有情况：添加、删除或重新填充您的数据（甚至是未更改的数据），并且手风琴元素将自行重新调整。

刷新（Docs）：

处理直接在 DOM 中添加或删除的任何标题和面板，并重新计算折叠面板的高度。结果取决于内容和 heightStyle 选项。

【讨论】：