jQuery UI 手风琴在第一个调用之后初始化后续调用

Question

步骤1：加载一个带有div“foo”和jqote2模板“tmpl_foo”的网页（jqote2是一个基于jQuery的模板系统）。

<div id="foo"></div>

<script type="text/x-jqote-template" id="tmpl_foo">
    <![CDATA[
    <% for (i in this.bar) { %>
            <h3><%= this.bar[i].title %></h3>
            <div class="pane"><%= this.bar[i].desc %></div>
    <% } %>
    ]]>
</script>

第 2 步：通过 jQuery 触发 ajax 查询以从服务器检索数据，使用 jqote2 填充 div“foo”，并在“foo”上初始化 jQuery UI 手风琴。

var get_foo : function () {
    $.ajax({
        url     : url,
        type    : "GET",
        data    : "",
        dataType: "json",
        error   : function() { alert("Error loading html document"); },
        success : function(res) {
            $("#foo").empty().append(
                $('#tmpl_foo').jqote({
                'bar': res.bar
                }) 
            ).accordion();
        }
    });
}

$(document).ready(function() {
    get_foo();
});

它工作得很漂亮。

在网页上，我还有其他链接，例如“上一页”和“下一页”（标准寻呼机功能），它们也会触发 get_foo()。这些操作还会导致正确获取新数据，并且新结果也会正确插入到“foo”中。然而，由于某种原因，手风琴没有被初始化。我很困惑。原因可能是什么？

Answer 1

您必须首先重置手风琴：

        $("#foo").empty().append(
            $('#tmpl_foo').jqote({
            'bar': res.bar
            }) 
        ).accordion('destroy').accordion();

如果您想保持该状态，您可能需要计算当前的手风琴项目。