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

Question

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

我查看了其他 Stack Overflow 问题和 JQuery 论坛，发现其中大部分都是关于在加载数据后调整面板大小的问题。我发现的最接近的问题是here，但它没有回答我的问题，因为试图破坏然后重新手风琴化我加载的 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 正文部分的相关部分：

<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，因为当我加载页面时，内容显示为 unaccordionized。而不是手风琴中的手风琴，我只是在梦想序列的第一层得到一堆无聊的内容。我必须降低一个级别...等等，我在哪里？

对，还有一件事：我尝试了两件事，但没有成功：
- 我尝试将加载和手风琴脚本都放在页面底部（首先加载），希望顺序很重要。 （noobish？不确定...）
- 我尝试在最后添加一个脚本来破坏和重新创建面板，如下所示：

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

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

Answer 1

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

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

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

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

Answer 2

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

在玩了更多之后，我找到了解决这个问题的方法，只要 AJAX 在页面加载时立即加载新数据。解决方案是在加载后立即调用手风琴函数一次。如下面的解决方案：

<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

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

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

之后，使用追加的 HTML 填充控件。