jquery手风琴部分ajax页面重新加载后损坏

Question

我正在使用jquery手风琴，它在初始页面加载时工作正常，但后来我有一些ajax命令重新加载页面的一部分，实质上是页面的内部主体。

当发生这种情况时，手风琴被打破了，因为我所做的更新只是取代几乎整个身体领域的innerHTML。

加载手风琴的脚本也包含在被替换的HTML中，但显然这并没有帮助。

如何在替换整个页面的innerHTML后保留（或重新调用）手风琴效果？

<div class="art-Post-inner" id="ajaxWrapper"> 
     <div id="accordion"> 
       <h3><a href="#">Skärm 1</a></h3> 
       <div> 
        my accordion content 
       </div> 
     </div> 

     <script> 

      $(document).ready(function() { 
       $('#accordion').accordion({ 
        collapsible: true, active: false, autoHeight: false 
       }); 
      }); 

     </script>   

这是通过设置id = ajaxWrapper的div的innerHTML完全取代的艺术。

我相信你会发现问题。

Answer 1

把jQuery的手风琴功能在.ajax请求的成功回调：

例子：

var accordionOpts = { 
    collapsible: "true", 
    active: "false", 
    autoHeight: "false" 
    }; 

$('#accordion').accordion(accordionOpts); 

$("#replaceContent").click(function() { 
    $.ajax({ 
     type: 'POST', 
     cache: false, 
     data: { 
      html: "<div id='accordion'><h3><a href='#'>Skärm 2</a></h3><div>my accordion content</div></div>" 
     }, 
     url: '/echo/html/', 
     success: function(data) { 
      $(".art-Post-inner").html(data); 
      $('#accordion').accordion(accordionOpts); 
     } 
    }); 
}); 

小提琴：http://jsfiddle.net/6Scgc/3/

Answer 2

使用$（ “.selector”）.accordion（“刷新“）;