jquery - 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”中都添加了警报，并且两者都出现了，那么它是如何被调用两次的呢？

显然，当链接包含文本“Show”时，它会显示隐藏的 div，当再次单击时，它将找不到“Show”，因此会隐藏该 div。有趣的是，它运行得非常完美。它位于公司内联网上，所以我想也许还有其他因素会影响它，但我真的不知道如何影响它。

Answer 1

当页面重新初始化时，您的文档就绪可能会被多次调用，最好的办法是在绑定(bind)新的点击事件之前取消绑定(bind)该点击事件。

这样就可以避免在 1 个元素上绑定(bind)两次点击事件

试试这个:

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

更新:

上述情况的问题在于，您必须将其再次绑定(bind)到第一次绑定(bind)点击函数后添加的每个额外元素。

您可以通过在 dom 中的父项上绑定(bind) 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>

当点击 anchor 标记时，您可以在 anchor 标记上绑定(bind)一些功能

$(function(){

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

});

现在，无论您稍后添加多少项目，它都会起作用。因为它接受 ul#ContactList 中任意位置的点击，并且仅当点击的元素与选择器 li a 匹配时才会执行回调。

while $('#ContactList li a') 首先获取所有元素，然后将点击绑定(bind)到所有选定的项目。之后新添加的项目没有点击事件，需要先将其绑定(bind)到它们。