本机JavaScript中的jQuery on()方法用于动态生成的元素

Question

我正在寻找本示例的本机javascript代码：

$("#parent").on("click", ".child", function(){
    alert("clicked");
});

我到目前为止所做的工作与页面随附的元素一起工作，而不是动态生成的元素：

var children = document.getElementById("parent").getElementsByClassName("child");
for (var i = 0, l = children.length; i < l; i++)
{
    children[i].onclick = foo;
}
function foo(el)
{
    alert("child clicked");
}

如何使此代码适用于动态生成的元素？

如果您正在寻找答案，则是：https://stackoverflow.com/a/27373951/2748984

Answer 1

您可以做类似以下操作的事情，该操作会听取添加到文档中的元素，然后绑定您的函数。我还建议绑定事件侦听器，而不是将您的方法分配给onclick属性，但请查看此答案以查看您真正需要的内容：

    // listen for new elements being added to the document
    document.addEventListener('DOMNodeInserted', function(event) {
        // check if they're the type of node you're looking for
        if (event.relatedNode.querySelectorAll('your selector')) {
            // bind the event listener
            event.relatedNode.addEventListener('click', function(event) {
                // your code
            });
        }
    });