重新加载部分ajax页面后，jQuery手风琴损坏 [英] jquery accordion broken after partial ajax page reload

问题描述

我正在使用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);
        }
    });
});

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

这篇关于重新加载部分ajax页面后，jQuery手风琴损坏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！