javascript - jquery accordion broken after partial ajax page reload - Stack Overflow

admin管理员组

文章数量:1425862

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

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

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

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>           

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

i trust you see the problem.

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

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

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

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>           

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

i trust you see the problem.

• javascript
• jquery
• ajax
• jquery-ui
• jquery-ui-accordion

Share Improve this question Follow edited Feb 4, 2012 at 23:13 mu is too short 435k7171 gold badges859859 silver badges818818 bronze badges asked Feb 4, 2012 at 22:47 Matt WelanderMatt Welander 8,5782525 gold badges9696 silver badges146146 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

use $( ".selector" ).accordion( "refresh" );

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

Example:

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

Fiddle: http://jsfiddle/6Scgc/3/

本文标签： javascriptjquery accordion broken after partial ajax page reloadStack Overflow