如何在无限滚动加载页面上执行 Javascript

Question

我正在处理产品列表页面，加载了更多产品 infinite scroll 问题是当新页面加载时，加载页面上的 jQuery on click 事件不会在用户单击 "add to cart" 时执行。如果使用 jquery load() 加载该脚本，它就会工作。但是无限滚动正在使用我不知道的其他东西。

$(document).ready(function() {
  jQuery_1_6_1('#mycontent').infinitescroll({
    navSelector: "#mynext:last",
    nextSelector: "#mynext:last",
    itemSelector: "#mycontent",
    debug: false,
    dataType: 'html',
    maxPage: <?php echo $pages_load;?>,
    path: function(index) {
        return "pages/index" + index + ".html";


      }
      // appendCallback : false, // USE FOR PREPENDING
  }, function(newElements, data, url) {

  });
});

Answer 1

来自我的评论：只需使用一个委托事件处理程序，附加到文档，在启动时加载一次，来处理点击事件。他们仍然会在稍后加载的元素上开火。

假设您的添加到购物车按钮的 class 为 "addtocart"，您可以这样做：

$(document).on('click', '.addtocart', function(){
   // handle click here
});

它的工作原理是委托监听祖先元素的事件（例如 document），然后将 jquery 选择器应用于气泡链中的元素，然后将您的事件函数应用于导致事件的匹配元素。

委托事件的结果是元素不需要在事件注册时存在，而只需要在事件时。

如何在无限滚动加载页面上执行 Javascript

How to execute Javascript on infinite-scroll loaded page

jquery

jquery-infinite-scroll