更换手风琴并不像手风琴

Question

我想我在这里缺少一些简单的东西。最初手风琴看起来很好。我有一个替换和手风琴的Ajax调用，但在它被替换后，它看起来不像手风琴。问题在下面提炼。

小提琴：http://jsfiddle.net/tzerb/5nJH7/

HTML：

<div id="theAcc">
    <h3><a href="#">1</a></h3>
    <div>One</div>
    <h3><a href="#">2</a></h3>
    <div>Two</div>
    <h3><a href="#">3</a></h3>
    <div>Three</div>    
</div>

​<button id="btnReplace">Replace</button>​​​​​​​​​​​​​​​​​​

使用Javascript：

$(function() {
    $( "#theAcc" ).accordion();
});

​$("#btnReplace").click(function() {
    $("#theAcc").html("<h3><a href='#'>A</a></h3><div>AAAA</div><h3><a href='#'>B</a></h3><div>BBBB</div><h3><a href='#'>C</a></h3><div>CCCC</div>");
});​​​​​​​​​​​​

感谢任何反馈。

TIA。

Answer 1

这是一个更新的jsFiddle，它具有您希望看到的行为：http://jsfiddle.net/5nJH7/5/

更新的代码是：

$(function() {
    $( "#theAcc" ).accordion();
});

$("#btnReplace").click(function() {
    $("#theAcc")
        .accordion("destroy");
        .html("<h3><a href='#'>A</a></h3><div>AAAA</div><h3><a href='#'>B</a></h3><div>BBBB</div><h3><a href='#'>C</a></h3><div>CCCC</div>")
        .accordion();
});​

您会看到问题，因为您已部分销毁了手风琴绑定的HTML元素（单击事件等）。在进行替换之前拆除手风琴可能是获得预期行为的最简单方法。

Answer 2

您可以将相关内容包装在另一个div中：

<div id="wrapper">    
<div id="theAcc">
        <h3><a href="#">1</a></h3>
        <div>One</div>
        <h3><a href="#">2</a></h3>
        <div>Two</div>
        <h3><a href="#">3</a></h3>
        <div>Three</div>    
    </div>
</div>
<button id="btnReplace">Replace</button>​​​​​​

这是你的新jQuery：

$(function() {
    $( "#theAcc" ).accordion();
});

$("#btnReplace").click(function() {
    $("#wrapper").html("<div id='theAcc'><h3><a href='#'>A</a></h3><div>AAAA</div><h3><a href='#'>B</a></h3><div>BBBB</div><h3><a href='#'>C</a></h3><div>CCCC</div></div>");        $( "#theAcc" ).accordion();
});​