我在每个帖子旁边都有一个简单的共享按钮,我使用.toggle()函数显示和隐藏选项。代码看起来像这样:
<div id="posts">
<div class="post">
<div class="content">
Post content
</div>
<div class="share">
<div class="trigger"> Share </div>
<div class="hidden"> Share on Facebook </div>
<div class="hidden"> Share on Twitter </div>
</div>
</div><!-- each post -->
<div id="new">
</div><!-- new post container -->
</div><!-- Posts -->
<script>
function shareThis(){
$('.trigger').click(function(){
$(this).siblings().toggle();
});
}
$(document).ready(function(){
shareThis();
$('#new').load("/post2", function(){
shareThis();
});
});
</script>
我在页面加载时调用一次此函数,然后在每次加载新帖子时调用此函数。
问题是,它在页面首次加载时起作用,而在新帖子加载时仅对新元素起作用。我也尝试了“每个”功能,但结果相同。
因此,它仅适用于最后一次通话,类似于我找到的here和here以及其他一些问题,但那里没有解决我的问题的方法。
谢谢!
最佳答案
问题是,它在页面首次加载时起作用,而在新帖子加载时仅对新元素起作用。
您的问题可能是通过在#new
回调内调用.trigger
将事件绑定到现有的shareThis
两次(或多次加载load
内容)。因此,基本上,当您单击旧的.trigger
时,它将触发两次处理程序,即两次切换处理程序,从而使它们保持相同的状态。因此,可以将事件单独绑定到新添加的事件,或者关闭click事件,然后在功能shareThis
中将其打开:
function shareThis(){
$('.trigger').off('click').on('click', function(){
$(this).siblings().toggle();
});
}
您也可以尝试:
function shareThis(ctx){
ctx = ctx || document;
$('.trigger', ctx).click(function(){
$(this).siblings().toggle();
});
}
$(document).ready(function(){
shareThis();
$('#new').load("/post2", function(){
shareThis(this);
});
});