Question

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

我有一个数组，我正在循环填充我的<div>（名为＆＃34;医院＆＃34;）。我将_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);
});

我在某个地方看到按钮必须存在才能将事件监听器绑定到它（我以为我用这个代码做了）但是我仍然无法做到这一点。我至少接近这样做了吗？

注意：我知道我可以使用jQuery执行此操作 - 我被要求在纯JS中执行此操作。

Answer 1

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

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

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

Answer 2

javascript解释器可能存在缓存问题，因此即使您之前要求创建一个也没有DOM节点引用。但是，您可以在创建它时将处理程序直接绑定到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);
    _button.addEventListener('click', function() { console.log('Clicked remove'); }, false);
    _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);

});

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

2 个答案: