javascript - 将点击监听器添加到动态按钮

Question

我正在制作一个页面，该页面将列出行，因为条目是使用与每一行关联的删除按钮创建的。我可以制作行并包含按钮，但我似乎无法获得 .addEventListener()绑定(bind)到那个按钮。

我有一个循环遍历的数组来填充我的 <div> (命名为“医院”)。我要添加 _button和 _span到 _row那_row然后附加到医院。

family.forEach(function(_member, cnt) {
    var _row = document.createElement('li');

    var _button = document.createElement("button");
    _button.id = "remove_item_" + cnt;
    var _button_text = document.createTextNode("Remove");
    _button.appendChild(_button_text);
    _row.appendChild(_button);

    var _span = document.createElement("span");
    _span.innerHTML = 'Age: ' + _member.age + ' / Relationship: ' + _member.rel + ' / Smoker? ' + _member.smoker;
    _row.appendChild(_span);

    hospital.appendChild(_row);
    document.querySelector("#remove_item_" + cnt).addEventListener('click', function() {
        console.log('Clicked remove');
    }, false);
});

我在某处读到按钮必须存在，然后才能将事件监听器绑定(bind)到它(我认为我用这段代码做到了)，但我仍然无法做到这一点。我至少接近这样做了吗？

注意:我知道我可以用 jQuery 做到这一点——我被要求用纯 JS 来做到这一点。

Answer 1

您可以在将元素插入 DOM 之前绑定(bind)处理程序。

所以只需将处理程序绑定(bind)到 appendChild 之前的 _button(或之后，这并不重要。引用仍然有效)

family.forEach(function(_member, cnt) {
    var _row = document.createElement('li');

    var _button = document.createElement("button");
    _button.id = "remove_item_" + cnt;
    var _button_text = document.createTextNode("Remove");
    _button.appendChild(_button_text);
    _row.appendChild(_button);

    var _span = document.createElement("span");
    _span.innerHTML = 'Age: ' + _member.age + ' / Relationship: ' + _member.rel + ' / Smoker? ' + _member.smoker;
    _row.appendChild(_span);

    _button.addEventListener('click', function() { console.log('Clicked remove'); }, false);

    hospital.appendChild(_row);
});