0

我想我在这里遗漏了一些简单的东西。最初手风琴看起来不错。我有一个替换手风琴的 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>

​&lt;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。

4

2 回答 2

6

这是一个更新的 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 元素（单击事件等）。在进行替换之前拆下手风琴可能是获得预期行为的最简单方法。

于 2012-05-03T19:29:12.447 回答
1

您可以将根据包装在另一个 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();
});​
于 2012-05-03T19:29:27.490 回答