javascript - 在不在 dom 上的元素上延迟绑定(bind)单击事件

Question

我们的 DOM 上有一些元素是作为对网络服务的响应而加载的。我想在他们身上绑定(bind)点击事件。我对网络服务调用没有任何控制权，因为它是由我不打算修改的框架完成的。

$(document).on('click', 'element', function)

这对我有帮助，但正在使用的 jquery 版本较旧。对此是否有替代或 native javascript 解决方案？

Answer 1

One of the hot methodologies in the JavaScript world is event delegation, and for good reason. Event delegation allows you to avoid adding event listeners to specific nodes; instead, the event listener is added to one parent. Refer this: http://davidwalsh.name/event-delegate

document.getElementById("parent-list").addEventListener("click", function(e) {
    // e.target is the clicked element!
    // If it was a list item
    if(e.target && e.target.nodeName == "LI") {
        // List item found!  Output the ID!
        console.log("List item ", e.target.id.replace("post-"), " was clicked!");
    }
});