javascript - 纯 JavaScript 添加监听器到加载的新元素

Question

我想要通过 AJAX 将监听器添加到新元素的想法:

例如，现在我有

<a href="#">hello world</a>

我为每个 <a> 添加了一个监听器，但是当我通过 AJAX 加载新元素时，它没有监听器；我不完全确定问题是什么。

是否在加载新元素时不调用该函数并为所有元素添加监听器？

我知道在 jQuery 中，我们可以使用 $("class").on() ，但是如何使用纯 JavaScript？

Answer 1

只需在添加新元素后立即在 ajax 成功回调中向动态添加的元素添加新监听器，或者使用事件委托(delegate)，这意味着您将事件监听器附加到静态祖先节点，该静态祖先节点将监视其动态子节点上的事件:

1.AJAX版本后附加新监听

var options = {
    type: "POST",
    url: "someurl",
    data: "some arguments",
    success: function (response) {
        //... add the new elements here...
        //...
        //attach event handlers here
        var myElement=document.getElementById("myDynamicElement");
        myElement.addEventListener("click",function(){
            this.style["border"]="5px solid red";
        });
    }
};
$.ajax(options);

<强>2。事件委托(delegate)版本

var myContainer = document.querySelectorAll(".container")[0];
myContainer.addEventListener("click", function (ev) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    while (target != myContainer) {
        var selector = ".myDynamicElement";
        var className = " " + selector + " ";
        if ((" " + target.className + " ").replace(/[\n\t]/g, " ").indexOf(" myDynamicElement ") > -1) {
            alert("test");
        }
        target = target.parentNode;
    }
});

.container {
    display:block;
    width:200px;
    height:200px;
    border:1px solid black;
}

<div class="container">
    <button class="myDynamicElement">New Button</button>
</div>