javascript - 如何在动态元素处添加eventListener？

Question

document.addEventListener('DOMContentLoaded', function() {

    var add = document.getElementById('addButton');
    var table = document.getElementById('table');
    var deleteBtn = document.querySelectorAll('.deleteButton');

    add.addEventListener('click', (e) => {
        table.innerHTML += `<div class="row">
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span></span>
                                <span class="deleteButton"><i class="fa fa-trash" aria-hidden="true"></i></span>
                            </div>`;
    });

    deleteBtn.forEach(function(btn) {
        btn.addEventListener('click', function() {
            console.log(this);
        })
    })

});

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}

.wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.table-wrapper {
    /* width: 90vw;
    max-width: 900px;
    min-height: 80px; */
    width: 600px;
    background-color: white;
    border: 1px solid #e6edf0;
    max-height: 400px;
    overflow-y: auto;
}

.table-wrapper>.row {
    height: 40px;
    width: 100%;
    border-bottom: 1px solid #ecf1f4
}

.table-wrapper>.row.header {
    background-color: #ecf1f4;
    font-weight: lighter;
    color: #b0b0b0;
    text-transform: uppercase;
}

.table-wrapper>.row>span {
    display: inline-block;
    line-height: 40px;
    text-align: center;
    font-size: 12px;
    position: relative;
}

.table-wrapper>.row>span:nth-child(1) {
    width: 40px;
}

.table-wrapper>.row>span:nth-child(2) {
    width: 80px;
}

.table-wrapper>.row>span:nth-child(3) {
    width: 60px;
}

.table-wrapper>.row>span:nth-child(4) {
    width: 60px;
}

.table-wrapper>.row>span:nth-child(5) {
    width: 80px;
}

.table-wrapper>.row>span:nth-child(6) {
    width: 40px;
    color: #c0c0c0;
}

.table-wrapper input[type=text],
.table-wrapper select {
    height: 30px;
    box-sizing: border-box;
    max-width: 50px;
    vertical-align: middle;
}

i.fa-trash {
    cursor: pointer;
    font-size: 16px;
}

.btn-wrapper {
    width: 100%;
    height: 40px;
    background-color: white;
    margin-top: 15px;
    border: 1px solid #e6edf0;
    box-sizing: border-box;
    line-height: 40px;
    text-align: center;
    font-size: 13px;
    cursor: pointer;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous>



<div class="wrapper">
        <div id="table" class="table-wrapper">
            <div class="row header">
                <span class="">idx</span>
                <span class="">name</span>
                <span class="">type</span>
                <span class="">options</span>
                <span class="">output</span>
                <span class=""> </span>
            </div>

            <div class="row">
                <span class="">1</span>
                <span class=""><input type="text" /></span>
                <span class=""><select><option>Name</option></select></span>
                <span class=""><select><option>Korean</option><option>English + Korean</option></select></span>
                <span class="">Kim</span>
                <span class="deleteButton"><i class="fa fa-trash" aria-hidden="true"></i></span>
            </div>
        </div>
        <div id="addButton" class="btn-wrapper">
            <i class="fa fa-plus" aria-hidden="true"></i> ADD ROW
        </div>
    </div>

我正在尝试使用 vanila JS 进行开发。

我正在制作一个表格，它具有add 功能和delete 功能。

我成功地实现了add功能，但是我无法实现关于动态元素的delete功能。

当我点击添加行按钮时，表格中添加了一行。

然后我点击了删除图标，我想查看console.log(this)。

但是，它不起作用。

你有没有想过用 vanilla JS 来解决这个问题？

我知道这是个简单的问题，所以我想说声抱歉，非常感谢。

总结

如何有效地在动态元素上添加 eventListener？

Answer 1

我想做什么？

假设我想要一个列表。我可以通过单击一个按钮来添加更多元素，如果我单击一个列表项，列表的标题应该会改变。

第一种方法是您在代码中所做的。第二种方法是您应该如何修复它。

方法 #1 - 行不通

您可以在代码片段下方找到无法正常工作的原因。

var title = document.getElementById("title"),
    parent = document.getElementById("parent"),
    child = document.querySelectorAll(".child"),
    add = document.getElementById("add");
    
add.addEventListener("click", function() {
  parent.innerHTML += '<li class="child">New element</li>';
});

child.forEach(function (child) {
  child.addEventListener("click", function() {
    title.innerHTML = this.innerHTML;
  });
});

<h3 id="title">This is a title</h3>

<ul id="parent">
  <li class="child">First element</li>
  <li class="child">Second element</li>
  <li class="child">Third element</li>
  <li class="child">Fourth element</li>
</ul>

<button id="add">Add element</button>

这称为事件委托(delegate)。首次加载页面时，动态生成的 LI 不在 DOM 中，并且没有附加点击事件。因此，尝试下面的代码可以解决该问题。

方法 #2 - 应该可行

var title = document.getElementById("title"),
    parent = document.getElementById("parent"),
    child = document.querySelectorAll(".child"),
    add = document.getElementById("add"),
    counter = 1;
    
add.addEventListener("click", function() {
  parent.innerHTML += '<li class="child">New element ' + counter + '</li>';
  counter++;
});

parent.addEventListener("click", function(e) {
  if ( e.target.nodeName == "LI" ) {
    title.innerHTML = e.target.innerHTML;
  }
});

<h3 id="title">This is a title</h3>

<ul id="parent">
  <li class="child">First element</li>
  <li class="child">Second element</li>
  <li class="child">Third element</li>
  <li class="child">Fourth element</li>
</ul>

<button id="add">Add element</button>

希望这个例子有助于理解事件委托(delegate)。如果有任何问题，请在下方发表评论。