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

Question

If in Jquery we can simply delegate the event in <body> like this: 如果在Jquery中，我们可以简单地在<body>委托事件，如下所示：

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

But how we do that in Vanilla Javascript? 但是我们如何在Vanilla Javascript中做到这一点？

Note: <a data-method=""> is created inside ajax content 注意： <a data-method="">是在ajax内容中创建的

Thanks. 谢谢。

Answer 1

You can add an event listener to body , and then check to see if the event.target.matches the desired selector: 您可以向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内容中的元素上附加事件监听器？

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-06-22 04:03:03

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-06-22 04:03:03

解决方案1
1 已采纳 2018-06-22 04:03:03