Jquery Accordion not firing on ajax call

问题

I copied the source code from an outputted page into the file below so you can see what I'm talking about:

http://playerspace.com/mysource.html

What we're looking at is the recent activity ajax (which, for some reason, doesn't work on this outputted version). I'm hoping just looking at the code will be enough to diagnose it.

Anyway the issue is the "comments" link which is an accordion that reveals an expanding text area. After an ajax load of the next 5 items in the timeline, the comments link (some or all of them) stop responding completely.

I tried adding the accordion code directly to the ajax call, but it still fails to execute consistently.

    $(document).on("click",'.siteusemore',function()
    {
    var ID = $(this).attr("id");
    var myscript = window.siteusemore_script || null;       
    if(ID)
    {
    $("#siteusemore"+ID).html('<img src="/images/processing.gif" />');                  
    $.ajax({
    type: "POST",
    url: myscript,
    data: "lastmsg="+ ID, 
    cache: false,
    success: function(html){                                    
        $("ol#siteuseupdates").append(html);                                            
        $("#siteusemore"+ID).remove();
        $('.accordionContent,.accordionContent-settings').hide();   
        $('.accordionContent,.accordionContent-manuallyadd').hide();                                
        $('.accordion-comments').live("click",function(event){
        var target=$(this).attr('href');
        if($(target).css('display')=='none')
        {
            $(target).show();
            $(this).text('Hide Comments');
        }
        else
        {
            $(target).hide();
            $(this).text('Comments');
        }
        return false;
        });                         
    }
    });
    }
    else
    {
        $(".siteusemorebox").html('The End');
        $('.accordionContent,.accordionContent-settings').hide();   
        $('.accordionContent,.accordionContent-manuallyadd').hide();                                
        $('.accordion-comments').live("click",function(event){
        var target=$(this).attr('href');
        if($(target).css('display')=='none')
        {
            $(target).show();
            $(this).text('Hide Comments');
        }
        else
        {
            $(target).hide();
            $(this).text('Comments');
        }
        return false;
        });                         
    }               
    return false;
});

I'm just starting out with ajax and I could use the help here. I guess my issue is getting the code that executes in my site.js file (found at the bottom of the page) to fire consistently with each ajax load?

Also I don't know if this helps or not but the issue seems to be occurring on every other ajax call, which is weird.

回答1:

I think you need to restart the accordion. Add this code to your success ajax call callback:

$("#accordion").accordion("destroy");
$("#accordion").accordion({collapsible: true,header: "h3",active: false});

This should apply the accordion on the correct divs, please substitute "h3" for your header div.

来源：https://stackoverflow.com/questions/14624125/jquery-accordion-not-firing-on-ajax-call