Question

我想通过AJAX将侦听器添加到新元素：

例如，现在我有

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

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

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

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

Answer 1

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

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。事件委托版本

＆＃13;

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;
    }
});

＆＃13;

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

＆＃13;

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

＆＃13;

纯JavaScript将侦听器添加到已加载的新元素中

1 个答案: