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

本文介绍了重新加载部分ajax页面后，jQuery手风琴损坏的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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

I am using jquery accordion and it works fine on initial page load, but then I have some ajax commands that reload part of the page, essentially the inner body of the page.

这种情况发生时，手风琴坏掉了，因为我进行的重装工作只是替换了几乎整个body字段的innerHTML.

When this happens, the accordion is broken, since the reload i do is just replacing the innerHTML of almost the entire body field.

替换后的HTML中也包含了加载手风琴的脚本，但这显然无济于事.

The script that loads the accordion is also included in the replaced HTML, but obviously that doesn't help.

替换整个页面的innerHTML之后，如何保持(或重新调用)手风琴效果?

How can I keep (or reinvoke) the accordion effect after replacing the innerHTML of my entire page?

<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，这完全被替换了.

This is the art that gets replaced entirely by setting the innerHTML of the div with id=ajaxWrapper.

我相信您会看到问题.

推荐答案

将jquery手风琴函数放入.ajax请求的成功回调中:

Put the jquery accordion function in the success callback of the .ajax request:

示例:

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); } }); });

提琴: jsfiddle/6Scgc/3/