slideToggle在一次调用中执行两次

Question

我现在无法显示一个实例,但我没有看到如何调用slideToggle两次.它是在点击链接时调用的.

这里:

// initialize the jquery code
 $(function(){
  $('div.slideToggle a').click(function(){
   $(this).parent().siblings('div.remaining-comments').slideToggle('slow',function(){ //'this' becomes the remaining-comments.
    var hidden = $(this).siblings('div.slideToggle').find('input').val();
    if($(this).siblings('div.slideToggle').find('a').html().substr(0,4) == 'Show'){
     $(this).siblings('div.slideToggle').find('a').html('Hide comments');
    }
    else {
     $(this).siblings('div.slideToggle').find('a').html(hidden);
    }
   });
  });
 });

它旨在显示和隐藏博客页面上的额外评论.然而,它只是一次显示然后隐藏.我在'if'和'else'中都出现了警告,两者都出现了,那么它是如何被调用两次的呢？

很明显,当链接包含文本"显示"时,它会显示隐藏的div,再次单击时,它将找不到"显示",因此会隐藏div.有趣的是,它的工作非常完美.它在公司内部网上,所以我想也许其他东西可能会影响它,但我真的不知道如何.

Answer 1

当页面重新初始化时,可能会多次调用您的文档就绪,最好的办法是在将新事件绑定到它之前取消绑定click事件.

这样就可以避免在1个元素上绑定click事件两次

试试这个:

$('div.slideToggle a').unbind('click').click(function(){
  // your code here
});

更新:

上述情况的问题在于,您必须再次将其绑定到第一次绑定click函数后添加的每个额外元素.

您可以通过在保留在dom中的父项上绑定1单击处理程序来解决此问题.给它一个子选择器作为参数.

它导致只添加1个单击处理程序,而不是每个元素1.所以你应该在性能,代码执行时间和你正在编写的javascript数量上获胜.

例:

假设您有一个列表,您可以在其中添加新元素

<ul id="ContactList">
    <li>John Doe <a href="#">Like</a></li>
    <li>Jane Doe <a href="#">Like</a></li>
    <li>Josh Doe <a href="#">Like</a></li>
    <li>Jeff Doe <a href="#">Like</a></li>
</ul>

并在单击时绑定锚标记上的某些功能

$(function(){

    $('#ContactList').on('click', 'li a', function(e){
        // do your thing here...
        var el = $(e.currentTarget);
        el.addClass('iLikeYou');
    });

});

现在,无论你以后添加多少项,它都会起作用.因为它接受点击内的任何地方的点击,ul#ContactList并且只有当被点击的元素与选择器匹配时才会执行回调li a.

同时, $('#ContactList li a') 将首先把所有的元素,然后单击所有选定的项目进行绑定.之后新添加的项目没有click事件,需要先将它绑定到它们.