当我动态更改按钮时，addEventListener click 不起作用答案

【问题标题】：addEventListener click doesn't working when I dynamically changing buttons当我动态更改按钮时，addEventListener click 不起作用
【发布时间】：2021-05-30 19:55:28
【问题描述】：

我有 3 个输入：姓名、姓氏和教育。最后一个输入（用于教育）可能是多个，所以我有添加更多输入的按钮。这个过程是动态工作的，但它有一个缺陷。 addEventListener 方法仅适用于第一个静态按钮，但不适用于在该过程中创建的按钮。在我看来，addEventListener 无法捕捉到元素的更新 ID 并且仅适用于前一个元素......有什么想法吗？

let counter = 0;
let buttonName, additionalId, additionalEducation, buttonId, dynamicButton, buttonIdListener, counter1;
additionalId = "education" + counter;
additionalEducation = "Education " + counter;
buttonId = "add"+counter;
buttonName = "name"+counter;


document.getElementById(buttonId).addEventListener('click', function(){

    // let hide = document.getElementById(buttonId);
    // hide.style.display = 'none';
    counter= counter+1;

    additionalId = "education" + counter;
    additionalEducation = "Education " + counter;
    buttonId = "add"+counter;
    buttonName = "name"+counter;

    let additionalLabel = document.createElement('label');
    additionalLabel.innerHTML = additionalEducation;
    additionalLabel.setAttribute('for',additionalId);

    let additionalInput = document.createElement('input');
    additionalInput.setAttribute('id',additionalId);
    additionalInput.style.borderRadius = "5px";
    additionalInput.style.backgroundColor = "blue";
    additionalInput.style.color = "white";

    let additionalButton = document.createElement('button');
    additionalButton.setAttribute('type','button');
    additionalButton.setAttribute('id',buttonId);
    additionalButton.setAttribute('name',buttonName);
    additionalButton.innerHTML = "Add";

    document.getElementById("form").appendChild(additionalLabel);
    document.getElementById("form").appendChild(additionalInput);
    document.getElementById("form").appendChild(additionalButton);


})

它是我的 html 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="#">
        <label for="name0">სახელი</label>
        <input type="text" id="name0" name="name">
        <label for="last_name0">გვარი</label>
        <input type="text" id="last_name0" name="last_name">
        <div>
            <label for="education0">განათლება</label>
            <input type="text" id="education0" name="education">
            <button type="submit" id="add0">დამატება</button>
        </div>
    </form>
    <script src="main.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript button click addeventlistener

【解决方案1】：

您需要在一个静态对象上设置您的监听器 - 一个不会被删除或添加的对象。所以你可以使用'form'并像这样设置它：

首先，用一个类更新你的静态 html 按钮 - 对于这个例子，'the-button'

<button type="submit" class='the-button' id="add0">დამატება</button>

然后设置您的事件侦听器。我将把它包装在一个 window.onload 函数中，以确保它在 HTML 呈现之前不会运行。

window.onload = function() {
  document.getElementById("form").addEventListener('click', function (evt) {
   if (evt.target.classList.contains('the-button')) theFunction(evt.target);
  });
}

然后我们将您的逻辑添加到一个函数中，确保将 the-button 类添加到任何新创建的按钮中，以便它们可以拾取侦听器。

function theFunction(fromButton) {
    // fromButton is just in case you want a reference from the button that was clicked
    counter= counter+1;

    additionalId = "education" + counter;
    additionalEducation = "Education " + counter;
    buttonId = "add"+counter;
    buttonName = "name"+counter;

    let additionalLabel = document.createElement('label');
    additionalLabel.innerHTML = additionalEducation;
    additionalLabel.setAttribute('for',additionalId);

    let additionalInput = document.createElement('input');
    additionalInput.setAttribute('id',additionalId);
    additionalInput.style.borderRadius = "5px";
    additionalInput.style.backgroundColor = "blue";
    additionalInput.style.color = "white";

    let additionalButton = document.createElement('button');
    additionalButton.setAttribute('type','button');
    additionalButton.setAttribute('id',buttonId);
    additionalButton.classList.add('the-button');
    additionalButton.setAttribute('name',buttonName);
    additionalButton.innerHTML = "Add";

    
document.getElementById("form").appendChild(additionalLabel);
        document.getElementById("form").appendChild(additionalInput);
        document.getElementById("form").appendChild(additionalButton);
}

【讨论】：

@ZakooKoo - 太棒了！请通过单击复选标记接受作为答案。干杯