Как я могу добавить слушатель события в динамический элемент

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

Вы добавляете его точно так же, как и любой другой прослушиватель событий. Вам просто нужно сделать это после того, как динамически добавленный элемент был добавлен в 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, становится намного проще:

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

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

Answer 3

Вы можете использовать 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);