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

Question

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

当这种情况发生时，手风琴就坏了，因为我所做的重新加载只是替换了几乎整个 body 字段的 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>           

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

我相信你看到了问题。

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( "refresh" );