Question

我有一个特定类别的10个项目的清单。当页面滚动到末尾时，将加载以下10个项目。

我只想为动态装载的物品而不是10个室内物品绑定一个事件。

我的问题是项目看起来完全一样，我不能更改任何类或其他任何东西。有什么解决办法吗？

Answer 1

在页面开始处创建一个包含前十个对象的--get-url。以后将事件仅绑定到不在集合中的元素。

Set

var s = new Set();
document.querySelectorAll('.aaa').forEach(el=>s.add(el));

setTimeout(function() {
  ex.innerHTML += '<span class="aaa">aaa</span>';
  ex.innerHTML += '<span class="aaa">aaa</span>';
  ex.innerHTML += '<span class="aaa">aaa</span>';
  ex.innerHTML += '<span class="aaa">aaa</span>';

  document.querySelectorAll('.aaa').forEach(el=> {
    if (!s.has(el)) {
      el.addEventListener('click', function() {
        alert('You clicked me');
      });
    }
  });
}, 1000);

.aaa {
   display: block;
}

仅最后4个元素添加了click事件监听器。

Answer 2

事件委托是您处理向动态内容添加事件的方式。由于您没有显示实际的代码，因此可以得到一个通用的答案。

$(document).on("click", ".yourClass", function () {
  console.log(this);
});

这样，您不必每次加载内容时都绑定事件。它只会监听父元素的点击。

最好将document更改为包含您正在监听click事件的所有元素的父元素。

仅针对动态内容运行脚本？

2 个答案: