Question

我的jQuery代码如下：

$('.sidebar_options_arrow').click(function() {
    id = $(this).attr('rel');
    toggled = 0;
    if(toggled == 0) {
        toggled = 1;
        $('#'+id+'-info').slideToggle('fast', function() {
            alert('1');
            toggled = 0;
        });
        $('.chat_sidebar_desc').not($('#'+id+'-info')).slideUp('fast');
    }
    return false;
});
$('#chat_sidebar ul li').click(function() {
    id2 = $(this).attr('rel');
    if(loading == 0) {
        loading = 1;
        $('#chat_main_container').fadeOut(function() {
            $('#loading').fadeIn(function() {
                if(id2 == 0) {
                    $('#chat_main_container').empty().load('chat/start.php');
                    $('#loading').delay(500).fadeOut(function() {
                        loading = 0;
                        $('#chat_main_container').fadeIn();
                    });
                }else{
                    $('#chat_main_container').empty().load('chat/index.php?roomid='+id2);
                    $('#loading').delay(500).fadeOut(function() {
                        loading = 0;
                        $('#chat_main_container').fadeIn();
                    });
                }
            });
        });
    }
    return false;
});

我遇到的问题如下：

我点击了sidebar_options_arrow，它运行正常，并且我的元素是slideToggle。
然后我点击同一页面上的li并让它加载页面。
我再次点击sidebar_options_arrow，然后一个接一个地切换两次。例如。在这个例子中，它会切换它以显示元素然后切换它以隐藏它。
如果我然后单击页面上的另一个li，然后再次单击sidebar_options_arrow，它将切换3次。这是一个持续的模式，我已经测试过10次切换并通过在切换时提醒它来确认它。

我真的很感激我能得到的任何帮助，这非常烦人！

提前致谢。

Answer 1

上面的代码很可能是多次运行，可能来自AJAX加载，这意味着$('.sidebar_options_arrow').click()代码在每次时加载一个额外的处理程序。要查看此操作，只需在第一行上方添加alert("binding");：$('.sidebar_options_arrow').click(function() {。

加载AJAX的内容不应该重新运行处理程序，除非它需要，正如你在这种情况下看到的那样，它会导致一些不必要的重复/重叠行为，因为每次加载都会添加 new 同样的处理程序。

您需要将JS部分从您正在加载的内容中移出，这样它就不会重新运行，或者以其他方式阻止它。在最糟糕的情况下（我建议它根本不运行，因为它更便宜，但如果你到....）你可以在.unbind()之前简单地拨打.click()附加处理程序。注意：如果您有多个处理程序（潜在的用户脚本等......此处有任何内容），您需要为该功能命名并明确调用.unbind("click", functionName)以确保安全。

jQuery .slideToggle（）重复

1 个答案: