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

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>

标签： javascriptdom

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>