手风琴在jquery $ .post中加载时无法正常工作

Question

I am stuck in working with dynamic accordion for the jQuery POST content.

In the firtpage.php, I have accordion div with dynamic table contents.

firstpage.php

<div id="accordion">
  <h3>section 1</h3>
  <div>
     <table>
     //dynamic table using php scripts
     </table>
  </div>
  <h3>section 2</h3>
  <div>
     <table>
     //dynamic table using php scripts
     </table>
  </div>
</div>

In the second page, I have loaded the firstpage.php using jQuery $.post method and on success, I set the according function.

secondpage.php

<p id="click">reload</p>
<div id="result"></div>

$('#click').click(function() {

    $.post('firtpage.php, function(data) {
    $('#result').html(data);
        $("#accordion").accordion({
    collapsible: true,
    active: false,
    heightStyle: "content"
    });
});
});

On first time, when I click p tag, accordion working fine. When I click second time, accordion not working.

Here, what I need to achieve, every time the post load the firstpage, the sections should be accordion.

Answer 1

You should populate your accordion() again. Please try this solution.

$('#click').click(function() {
    $.post('report.php', function(data) {

        // Destroy your old accordion
        $("#accordion").accordion("destroy");

        $('#result').html(adata);
        $("#accordion").accordion({
             collapsible: true,
             active: false,
             heightStyle: "content"
        });
    });
});

Demo: http://jsbin.com/tokuda/2/