slideToggle在一次调用中执行两次

我不能在此处显示实例，但我看不到slideToggle如何被调用两次。它被点击链接调用。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。有趣的是，它的运行非常完美。它在公司内联网上，所以我想也许别的东西可能会影响它，但我真的不知道如何。

来源

2010-09-30 Alex B

当页面重新初始化时，可能您的文档已准备好被调用多次，要做的最好的事情是在将新事件绑定到它之前解除绑定。

这样，您就不必单击事件1元

开往两次尝试这个办法：

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

UPDATE：

这种上述情况的问题是，你必须将它再次绑定到第一次绑定click函数后添加的每个额外元素。

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

它导致只添加1个点击处理程序，而不是每个元素1个。所以你应该赢得性能，代码执行时间和你写的javascript数量。

例如：

比方说您有一个列表，你dinamically增加新的元素

<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')将首先获取所有元素，然后将点击绑定到所有选定的项目。之后新增的项目没有点击事件，需要首先绑定它们。

来源

2010-09-30 10:56:53 Sander

这不是最好的解决办法...对待这个问题不症状，如果它正在运行两次，*为什么*？没有理由两次运行所有'ready'处理程序代码，这是非常低效的。另外如果其他'click'处理程序绑定到该元素？ – 2010-09-30 10:59:16

我认为它必须与.ready被多次调用。我们的页面是大量不同代码片段的混合。所以可重用的函数被放在单独调用.ready中。取消绑定为我做了窍门，谢谢。 – 2010-09-30 11:07:06

我知道尼克，但我不知道为什么他的准备好声明是两次运行，所以我不能暗示可能的解决方案。 allthough我应该补充说，这是一个解决方法，而不是本身的修复。 – Sander 2010-10-06 10:01:56

-1

小心移动或包裹包含脚本块的元素。这可能会导致代码被执行两次。解除绑定是一种解决方法，但更好地将您的js移动到页面的头部或底部。

来源

2013-05-01 07:43:07 Justin

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

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

来源

2016-06-30 20:33:57 Simon

只要使用e.stopPropagation（）;在开始（和功能（E）{）为我修好了。

来源

2016-07-19 00:14:16

序幕

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

可能的答案

当一个jQuery调用在同一呼叫一个以上的元素，功能被执行一次以上。

为例

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

- > #div_two会出现，消失，然后再次出现，因为链接的功能会触发两次。

其它附加信息

同样的事情发生一起多元素类的调用。

解决方案

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

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

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

它改变了用户体验，但它的作品...

来源

2016-10-04 14:53:27 MMB

slideToggle在一次调用中执行两次

回答

相关问题