jQuery手风琴未在ajax调用上触发 [英] Jquery Accordion not firing on ajax call

问题描述

我将输出页面中的源代码复制到下面的文件中，因此您可以看到我在说什么：

http://playerspace.com/mysource.html

我们在寻找什么at是最近的活动ajax（由于某种原因，此活动在此输出版本上不起作用）。我希望仅仅看一下代码就可以对它进行诊断。

无论如何，问题是 comments链接，它是一个手风琴，可显示正在扩展的文本区域。在时间轴上加载下5个项目的ajax之后，评论链接（其中的一些或全部）将完全停止响应。

我尝试将手风琴代码直接添加到ajax调用中，但是仍然无法始终如一地执行。

  $（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，
网址：myscript，
数据： lastmsg = + ID，
缓存：false，
成功：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（隐藏评论）; 
} 
 else 
 {
 $（target）.hide（）; 
 $（this）.text（评论）; 
} 
返回false； 
}）； 
} 
}）； 
} 
其他
 {
 $（。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（'隐藏评论' ）; 
} 
其他
 {
 $ {target）.hide（）; 
 $ {this）.text（'Comments'）; 
 } 
返回false； 
}）； 
} 
返回false； 
}）； 
  

我只是从ajax开始，我可以在这里使用帮助。我想我的问题是要让在我的site.js文件（位于页面底部）中执行的代码与每次ajax加载一致地触发吗？

我也不知道这是否有帮助，但是其他每次ajax调用似乎都出现了这个问题，这很奇怪。

解决方案

我认为您需要重新启动手风琴。将此代码添加到成功的ajax调用回调中：

  $（＃accordion）。accordion（ destroy）; 
 $（＃accordion）。accordion（{collapsible：true，header： h3，active：false}）; 
  

这应将手风琴应用于正确的div，请用 h3代替标题div。 / p>

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.

解决方案

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.

这篇关于jQuery手风琴未在ajax调用上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！