我在每个帖子旁边都有一个简单的共享按钮,我使用.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>


我在页面加载时调用一次此函数,然后在每次加载新帖子时调用此函数。

问题是,它在页面首次加载时起作用,而在新帖子加载时仅对新元素起作用。我也尝试了“每个”功能,但结果相同。

因此,它仅适用于最后一次通话,类似于我找到的herehere以及其他一些问题,但那里没有解决我的问题的方法。

谢谢!

最佳答案

问题是,它在页面首次加载时起作用,而在新帖子加载时仅对新元素起作用。


您的问题可能是通过在#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);
    });
});

10-05 21:05
查看更多