Javascript Vanilla - 如何在 ajax 内容中的元素上附加事件侦听器？

Question

如果在 Jquery 中，我们可以像这样简单地委托 <body> 中的事件：

$('body').on('click', 'a[data-method]', function () {
  // event action here
});

但我们如何在原版中做到这一点 Javascript？

注：<a data-method="">是在ajax内容里面创建的

谢谢。

Answer 1

您可以向 body 添加一个事件侦听器，然后检查 event.target.matches 是否是所需的选择器：

document.body.addEventListener('click', (event) => {
  if (!event.target.matches('a[data-method]')) return;
  console.log('click');
});

setTimeout(() => {
  const a = document.body.appendChild(document.createElement('a'));
  a.setAttribute('data-method', 'foo');
  a.textContent = 'aaa';
}, 100);

Javascript Vanilla - 如何在 ajax 内容中的元素上附加事件侦听器？

Javascript Vanilla - How to attach event listener on element inside ajax content?

javascript

ajax

selector