Jquery不仅仅在页面的上半部分工作

Question

我在页面上有多个这样的项目（项目库。）

 <li class="addto" id="<?=$ID;?>">

然后，我有一些jquery在点击“.addto”时会触发一些事情。

我找到的jquery是什么并不重要。如果只是：

 <script>
 $(window).load(function() {

   $('.addto').click(function() {
   alert("HI");
  });
 });
 </script>

当我位于页面顶部时，一切正常，如果单击.addto项，jquery将触发HI消息。我可以继续在项目列表中执行此操作，直到我向下滚动到页面的大约一半。然后，一旦我向下滚动到某个部分，它就会停止工作并且没有任何反应。它发生在各种数据页面上，这些是动态画廊，所以它不仅仅是一个画廊。

是否有其他人遇到此问题或知道如何调试？没有错误通过控制台报告给我。

Answer 1

如果你有很多.addto元素 - 在创建大量匿名函数时不要将监听器附加到每个元素，每个监听器都有一个。而是使用.on()方法，它创建一个附加到父级的侦听器，它按类型和目标过滤事件。您可以在http://api.jquery.com/on

阅读更多内容

您的代码可以重写为

$('body').on('click', '.addto', function(){ 
  alert('Hi'); 
}); 

如果要动态添加带有.addto的元素，因为新元素没有附加的侦听器，但是如果静态父元素也是 - 函数也会为它们调用。您可以使用'body'

的元素的任何静态父代替.addto而不是{{1}}