仅将侦听器应用于具有 AJAX 无限滚动的新项

apply listener to only new items with ajax infinite scroll

本文关键字：无限 滚动 新项 AJAX 侦听器 应用于      更新时间：2023-09-26

我正在使用 ajax 无限滚动在我的网站上加载内容，并且我为每个项目都有一个侦听器事件，该事件显示一个包含附加信息的新元素。

<div class="items">
  <div class="item"><i class="fa fa-gear"></i></div>
  <div class="item"><i class="fa fa-gear"></i></div>
  ...
</div>
<div id="pagination">
  <a href="?page=2" class="next">Next</a>
</div>
var ias = jQuery.ias({
      container:  '.items',
      item:       '.item',
      pagination: '#pagination',
      next:       '.next'
});

我正在使用它为每个新页面加载侦听器：

ias.on('rendered', function(items) {
  var $items = $(items);
  $items.each(function() {
    $('.fa').click(function() {
      show($(this).attr('id'));
    });
  });
});
function show(what) {
    $('body').append('<div class="options"></div>');
    $('.options').load('options.php?id='+id);
}

我的问题是每次加载新页面时，侦听器都会应用于每个项目，因此当加载第 2 页时，第 1 页中的项目现在将附加两个 .options 并加载两次，当第 3 页加载时，第 1 页项目加载三次，第 2 页项目加载两次，依此类推。 如何在加载每个新页面时仅将侦听器应用于新页面项目？

您可以取消绑定并重新绑定事件以仅具有一个侦听器，如下所示：

  $items.each(function() {
    $('.fa').unbind("click").click(function() {
      show($(this).attr('id'));
    });
  });
相关文章：