JQuery Accordion 不“手风琴化”；通过 AJAX 加载新面板

Question

我必须使用 AJAX 将手风琴面板加载到我的页面之一，我发现 JQuery 正在“手风琴化”HTML 文件中定义的所有面板，但没有一个面板是通过 Javascript 加载的。另一个小怪癖：我正在一个嵌套的手风琴上执行此操作 - 手风琴内的手风琴。如果你愿意的话，这就是手风琴的诞生。

我检查了其他 Stack Overflow 问题和 JQuery 论坛，发现大多数问题都是关于加载数据后调整面板大小的。我发现的最接近的问题是这里，但它没有回答我的问题是因为尝试销毁然后重新折叠我的 JS 加载面板不起作用。

这是我的 html head 部分的相关部分：

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/flick/jquery-ui.css" type="text/css" />  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js"></script>  

<script type="text/javascript">  
  $(document).ready(function() {
    $(".accordion").accordion({
        collapsible: true, 
        icons: false,
        autoHeight: false,
        active: false 
    });
  });  
</script>

这是我的 html body 部分的相关部分：

<div class="accordion">
    <h3 id="acc1">First panel title</h3>
    <div>First panel content</div>

    <h3 id="acc2">Second panel title</h3>
    <div class="accordion" id="ajaxresults-aliaslist">This is where the nested accordion goes</div>

    <h3 id="acc3">Third panel title</h3>
    <div>Thirdpanel content</div>
</div>

<script type="text/javascript">
$("#ajaxresults-aliaslist").load("/loadaliaslist/");
</script>

当 javascript 加载“/loadaliaslist/”时，它收到包含以下内容的消息：

<h3>1st panel within a panel title</h3>
<div>1st panel within a panel content</div>

<h3>2nd panel within a panel title</h3>
<div>2nd panel within a panel content</div>

<h3>3rd panel within a panel title</h3>
<div>3rd panel within a panel content</div>

我知道上面的内容被传递到 div，因为当我加载页面时，内容显示为未手风琴化。我得到的不是手风琴中的手风琴，而是梦想序列第一层的一堆无聊内容。我必须下降一个级别...等等，我刚才在哪里？

对了，还有一件事：我尝试了两种不起作用的方法：
- 我尝试将加载脚本和手风琴脚本都放在页面底部（首先加载），希望顺序很重要。 （菜鸟？不确定...）
- 我尝试在最后添加一个脚本来销毁并重新创建面板，如下所示：

$("#ajaxresults-aliaslist").accordion('destroy').accordion();

仅此而已。我真的希望有人是手风琴界的莱昂纳多·迪卡普里奥，可以帮助我摆脱困境。非常感谢！

Answer 1

我想您想重置手风琴控件。尝试这样做：

$('#accordion')[0].innerHTML = "";

之后使用附加功能用 HTML 填充控件。

Answer 2

从 OP 编辑​​：找到的解决方案

经过更多尝试后，我找到了解决此问题的方法，只要 AJAX 在页面加载时立即加载新数据即可。解决方案是在加载后立即调用 Accordion 函数，仅调用一次。如下解决方案所示：

<script type="text/javascript">  
$("#ajaxresults-aliaslist").load("/loadaliaslist/",  
    function(response, status, xhr) {    
    if (status == "error") {   
        var msg = "Sorry but there was an <strong>error</strong>: ";   
        $("#error").html(msg + xhr.status + " " + xhr.statusText);   
    }  
/* All panels are accordionized immediately after loading the content */   
    $(".accordion").accordion({   
        collapsible: true,  
        icons: false,  
        autoHeight: false,  
        active: false  
     });   
});   
</script>  

警告：只有立即加载所有手风琴内容时，此方法才有效。如果在第一个accor之后加载了一些内容

Answer 3

未经测试，但尝试这样的事情...

问题很可能是由于事件处理程序没有附加到插入的内容（通过 Ajax）。

$(function() {
    var config = {
        collapsible: true, 
        icons: false,
        autoHeight: false,
        active: false
    }
    $(".accordion").live('load', function(){
        $(this).accordion(config);
    }).accordion(config);
});

编辑：稍微更改了代码（尚未测试）。