how can i add event listener to dynamic element

Question

How can i add event listener for element that created with innerHTML? in my example code i want add event listener for X button

 <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

Just add an event listener like how you normally would.

<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

You could use a querySelector whose result can only be the button you made, or you could create the button using document.createElement('button') , add an event listener and use appendChild to add the button to the userForm.

// 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(...);

or alternatively

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

You add it exactly the same way you add any other event listener. You just have to do it after the dynamically added element has been added to the 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>

The problem that you'll run into though is that because you are using .innerHTML to add the new element to the DOM and because you are potentially adding more than one of them, we don't have a way for the second and subsequent buttons to be referenced easily.

Instead, if you create the new elements using the DOM API and .createElement , it becomes much simpler:

 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>