为啥 addEventListener 属性对动态 HTMLcollection 对象不起作用？

Posted 2023-02-19

【中文标题】为啥 addEventListener 属性对动态 HTMLcollection 对象不起作用？

【英文标题】：Why does the addEventListener property does not work on a dynamic HTMLcollection object?为什么 addEventListener 属性对动态 HTMLcollection 对象不起作用？

【发布时间】：2022-01-23 04:19:25

【问题描述】：

我正在开发 chrome 扩展并尝试将事件侦听器添加到 getElementsByClassName 变量，其中元素是使用模板字符串动态添加的。

我尝试了很多代码的更改，但代码不起作用。

该代码应该从数组“recipeList”中删除目标元素，将数组存储在localStorage中，然后使用模板字符串再次将更新后的数组“recipeList”渲染到html代码中。

删除按钮功能

let delBtn = document.getElementsByClassName("del-btn");

for(let i = 0; i < delBtn.length; i++)  
    delBtn[i].addEventListener("click", function() 
        recipeList.splice(i, 1);
        localStorage.setItem("recipeList", JSON.stringify(recipeList));
        recipeList = JSON.parse(localStorage.getItem("recipeList"));
        render(recipeList);
        if(!recipeList.length) 
            tabBtn.style.width = "100%";
            delAllBtn.style.display = "none";
        
    ); 

渲染代码

function render(list) 
    let recipeURL = "";
    for(let i = 0; i < list.length; i++) 
        recipeURL += `
        <div class="mb-2 row">
            <div class="col-1 num-btn">
                $i+1
            </div>
            <div class="col-10">
                <div class="recipe-url">
                    <a target="_blank" href="$list[i]">
                        $list[i]
                    </a>
                </div>
            </div>
            <div class="col-1 del-btn">
                <a href="#">
                    <i class="bi bi-trash-fill"></i>
                </a>
            </div>
        </div>
        `
    
    urlList.innerHTML = recipeURL;
    console.log(delBtn);

【参考方案1】：

渲染时，您会创建新的.del-btn，它们不包含在您的第一个let delBtn = document.getElementsByClassName("del-btn"); 中。

每次创建新的.del-btn 时，还应该添加一个新的侦听器。

function render(list) 
    let recipeURL = "";
    for(let i = 0; i < list.length; i++) 
        recipeURL += `
        <div class="mb-2 row">
            <div class="col-1 num-btn">
                $i+1
            </div>
            <div class="col-10">
                <div class="recipe-url">
                    <a target="_blank" href="$list[i]">
                        $list[i]
                    </a>
                </div>
            </div>
            <div class="col-1 del-btn">
                <a href="#">
                    <i class="bi bi-trash-fill"></i>
                </a>
            </div>
        </div>
        `
    
    urlList.innerHTML = recipeURL;
    console.log(delBtn);

    Array.from(urlList.querySelectorAll('.del-btn')).forEach((btn, i) => 
        btn.addEventListener('click', () => console.log('.del-btn index: ' + i))
    )
    

【讨论】：

感谢您的帮助。但是我该怎么做呢，我尝试将事件侦听器添加到父元素并使用 event.target 来获取触发的元素，但根据我的代码，我想要 event.target 的索引，但是每当我点击按钮，只有第 0 个子节点被选中。我正在尝试使用let i = Array.prototype.indexOf.call(parent.children, event.target) 和let i = event.target.index 来获取索引，但它们都不起作用。

我添加了一个例子。告诉我这是否更清楚。

谢谢，这确实很有用，你的代码就像一个魅力。