我现在无法显示一个实例,但我没有看到如何调用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.有趣的是,它的工作非常完美.它在公司内部网上,所以我想也许其他东西可能会影响它,但我真的不知道如何.
解决方法
当页面重新初始化时,可能会多次调用您的文档就绪,
最好的办法是在将新事件绑定到它之前取消绑定.
最好的办法是在将新事件绑定到它之前取消绑定.
这样就可以避免在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事件,需要先将它绑定到它们.
