javascript - 在动态创建的元素上添加相同的事件监听器？

Question

好的，所以我的问题不清楚让我解释一下我想做什么

我有一组输入，我在运行时添加了事件监听器，我正在删除输入标签并生成新标签，我想在上面设置相同的事件监听器，所以我该怎么做

提前致谢

这是我的代码

document.querySelectorAll("input[type=radio]").forEach(radio => {
   
   
    radio.onchange = () => { // Event No.1
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {

                var li = JSON.parse(this.response);

                // the response i am getting
                //["mainCategory",{"id":11,"MainCategory":"Pendalset","Top_ID":3,"created_at":null,"updated_at":null,"name":"Pendalset"},{"id":12,"MainCategory":"Diamond","Top_ID":3,"created_at":null,"updated_at":null,"name":"Diamond"},{"id":13,"MainCategory":"Couple Collection","Top_ID":3,"created_at":null,"updated_at":null,"name":"Couple Collection"},{"id":14,"MainCategory":"Antique","Top_ID":3,"created_at":null,"updated_at":null,"name":"Antique"},{"id":15,"MainCategory":"Wedding Collection","Top_ID":3,"created_at":null,"updated_at":null,"name":"Wedding Collection"},{"id":16,"MainCategory":"Engagement Collection","Top_ID":3,"created_at":null,"updated_at":null,"name":"Engagement Collection"},{"id":17,"MainCategory":"Necklace set","Top_ID":3,"created_at":null,"updated_at":null,"name":"Necklace set"}]

                var ul = document.querySelector("#" + li[0]);

                //removing inputs

                switch (li[0]) {
                    case "mainCategory":
                        var main = document.querySelector("#mainCategory");
                        var sub = document.querySelector("#subCategory");
                        while (main.firstChild) {
                            main.firstChild.remove()
                        }
                        while (sub.firstChild) {
                            sub.firstChild.remove()
                        }

                        break;
                    case "subCategory":
                        var sub = document.querySelector("#subCategory");
                        while (sub.firstChild) {
                            sub.firstChild.remove()
                        }
                        break;
                }
                var inpName = li.shift();
                //creating new list tag and input
                li.forEach(el => {
                    var list = document.createElement("li");
                    var input = document.createElement("input");
                    var b = document.createElement("b")
                    input.name = inpName;
                    input.type = "radio";
                    input.value = el.id
                    b.textContent = el.name;
                    list.append(input);
                    list.append(b);
                    ul.append(list)
                        // adding diffrenet event listeners 

                        // I WANT TO ADD EVENT NO.1 HERE on Dyanamically genrated Inputs
                    input.addEventListener("change", () => {
                        input.parentElement.parentElement.parentElement.firstElementChild.firstElementChild.textContent = input.nextElementSibling.textContent;
                        details.forEach((detail) => {
                            if (detail !== input) {
                                detail.removeAttribute("open");
                            }
                        });
                    })

                });
            }
        };
        xhr.open("GET", `category-update-${radio.name}-${radio.value}`, true);
        xhr.send()
    }
});

标签： javascriptaddeventlisteneronchange