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

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

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

试试这个：

$('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事件，需要先将它绑定到它们。

Answer 2

<强>序言

你的问题的答案指出了一些关于jQuery的奇怪之处。当我试图隐藏/滑动div并显示/滑动另一个（在jquery / Ajax导航网站中）时，我遇到了这个问题，不知道哪些div已经可见。

可能的答案

当jquery在同一个调用中调用多个元素时，该函数会被执行多次。

<强>为例

$("#div_one, #div_two").hide("slow", function() {
   $("#div_two").show("slow");
});

- ＆GT; #div_two将出现，消失，然后再次出现，因为链接函数将触发两次。

附加信息

调用具有多个元素的类时也会发生同样的事情。

<强>解决方案

就我而言，我只是决定以不同的方式做事。第一个div只消失（没有幻灯片效果），新的可以有幻灯片效果。这样，我不需要在触发新div之前等待第一个div滑动，所以我不必将第二个命令封装到一个链式函数中。

在此示例中，警报仅触发一次：

$("#div_one, #div_two").hide();
$("#div_two").show("slow");
});

它改变了用户体验，但它有效......

Answer 3

我已经很晚了，但是slideToggle()函数会为它切换的每个元素调用complete函数。

可能有多个$(this).parent().siblings('div.remaining-comments')。

Answer 4

只需使用e.stopPropagation（）;在开始时（和函数（e）{）为我修复它。

Answer 5

只想补充一点，我遇到了同样的问题。由于无法解决合并冲突，因此该页面中两次包含一个.js文件。因此，复选框上的change事件触发了两次。

因此，请检查以确保连接事件处理程序（或调用.ready()）的代码没有被两次引用。

Answer 6

注意移动或包装其中包含脚本块的元素。这可能导致那里的代码执行两次。 unbind是一种解决方法，但最好将你的js移动到页面的头部或底部。

slideToggle在一次调用中执行两次

6 个答案: