我如何将事件侦听器添加到动态元素

Question

如何为使用innerHTML创建的元素添加事件侦听器？在我的示例代码中，我想为X按钮添加事件监听器

 <button class="btn btn-sm btn-success add-input-text">add</button>
 <script>
  var addInputText = document.querySelector('.add-input-text');
  var userForm = document.querySelector('.user-form');

   addInputText.addEventListener('click', function(){
   userForm.innerHTML += `<button class="form-section-remove- 
   1">X</button>`;
  });
 </script>

Answer 1

只需像往常一样添加事件侦听器。

<button class="btn btn-sm btn-success add-input-text">add</button>
 <script>
  var addInputText = document.querySelector('.add-input-text');
  var userForm = document.querySelector('.user-form');

   addInputText.addEventListener('click', function(){
   userForm.innerHTML += `<button class="form-section-remove- 
   1">X</button>`;
   document.querySelector(".form-section-remove-1").addEventListener(/*whatever you're doing*/)
  });
 </script>

Answer 2

您可以使用querySelector，其结果只能是您创建的按钮，或者您可以使用document.createElement('button')创建按钮，添加事件侦听器，然后使用appendChild将按钮添加到用户窗体。

// Works if the is only one button in .user-form with .form-section-remove-1
document.querySelector('.user-form > button.form-section-remove-1').addEventlistener(...);

或替代地

const xButton = document.createElement('button');
xButton.innerText = 'X';
xButton.classlist.add('form-section-remove-1');
xButton.addEventListener('click', function(event) {
   // Do whatever
}); 
userForm.appendChild(xButton);

Answer 3

您添加它的方式与添加任何其他事件侦听器的方式完全相同。您只需在将动态添加的元素添加到DOM之后执行此操作。

var addInputText = document.querySelector('.add-input-text');
var userForm = document.querySelector('.user-form');
  
addInputText.addEventListener('click', function(){
  userForm.innerHTML += 
  "<button class='form-section-remove-1'>X</button>";
  
  // Now that the new element has been added to the DOM,
  // you can work with it as you would any other element.
  document.querySelector("button.form-section-remove-1").addEventListener("click", function(){
    console.log("You clicked me!");
  });
});

<button class="btn btn-sm btn-success add-input-text">add</button>
<div class="user-form"></div>

您会遇到的问题是，因为您正在使用.innerHTML将新元素添加到DOM中，并且由于可能添加多个元素，所以我们无法解决第二个问题和后续按钮易于参考。

相反，如果使用DOM API和.createElement创建新元素，它将变得更加简单：

.createElement

var addInputText = document.querySelector('.add-input-text');
var userForm = document.querySelector('.user-form');
  
addInputText.addEventListener('click', function(){
  // Create the element as a new DOM node
  let btn = document.createElement("button");
  
  // Now, configure it through its properties and methods:
  btn.textContent = "X";
  btn.classList.add("form-section-remove-1");
  btn.addEventListener("click", function(){
    console.log("You clicked me!");
  });
  
  // Append it into the DOM
  userForm.appendChild(btn);
});