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

使用$（“。selector”）。accordion（“refresh”）;

Answer 2

将jquery accordion函数放入.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/

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

2 个答案: