Button added by javascript not triggering click event

Question

I have this initial structure:

 <section id="content">
      <div class="container participant">
         <div class="row">

            <div class="input-group">
               <div class="input-group-prepend">
               <span class="input-group-text">Name & Tickets</span>
               </div>

               <input type="text" aria-label="name" class="form-control">
               <input type="text" aria-label="tickets" class="form-control">

               <div class="input-group-append">
                  <button class="addUser btn btn-outline-secondary" type="button">
                     <i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="Add participante"></i>
                  </button>
               </div>
            </div>

         </div>
      </div>
   </section>  

When I click on the button, this javascript code replicates it and add a new content ( I don't know how to replicate a piece of code Laravel-like with something like @yell so I just copied the whole html):

$('.addUser').click( function () {
   $('#content').append(     
      '<div class="container">'+
         '<div class="row">'+         
            '<div class="input-group">'+
               '<div class="input-group-prepend">'+
               '<span class="input-group-text">Nome & Tickets</span>'+
            '</div>'+

            '<input type="text" aria-label="name" class="form-control">'+
            '<input type="text" aria-label="tickets" class="form-control">'+

            '<div class="input-group-append">'+
               '<button class="addUser btn btn-outline-secondary" type="button">'+
                  '<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="Add participante"></i>'+
               '</button>'+
            '</div>'+
         '</div>'+
      '</div>'+
   '</div>'
   );
});  

The problem is: It works perfect but ONLY for the first button.
If I keep clicking the first button, it keeps replicating the structure. But if I click on the replicated buttons, it doesn't work. No error just nothing happens. Why exactly is this happening ?

Answer 1

This should work. You are adding dynamic DOM to the page when you do that you have to target the static element then reach down and trigger the click even of the dynamic element with the solidified class.

// cache the DOM that you want to add.
var newDom = $('<div class="container">'+
         '<div class="row">'+         
            '<div class="input-group">'+
               '<div class="input-group-prepend">'+
               '<span class="input-group-text">Nome & Tickets</span>'+
            '</div>'+

            '<input type="text" aria-label="name" class="form-control">'+
            '<input type="text" aria-label="tickets" class="form-control">'+

            '<div class="input-group-append">'+
               '<button class="addUser btn btn-outline-secondary" type="button">'+
                  '<i class="fas fa-user-plus" data-toggle="tooltip" data-placement="top" title="Add participante"></i>'+
               '</button>'+
            '</div>'+
         '</div>'+
      '</div>'+
   '</div>'
   );


$('#content').on('click', '.addUser',  function (e) {
   e.preventDefault();
   $(this).append(newDom);
});  

Answer 2

Because the new buttons aren't the first button. The browser is following the initial button not the others. You could add a function call inline doing it as an onclick attribute.