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 ?

It's because it's dynamically created which has a different way of attaching event listeners to them. See this answer: https://stackoverflow.com/questions/34896106/attach-event-to-dynamic-elements-in-javascript — Ana Liza Pandac, Jan 06 '19 at 02:48
are you comfortable with changing the HTML? Because I think you are adding multiple buttons that just add another row. — Bibberty, Jan 06 '19 at 02:53
@AnaLizaPandac The answer worked. Thanks !! Bibberty Yes sure. — PlayHardGoPro, Jan 06 '19 at 02:54

andre mcgruder · Answer 1 · 2019-01-06T03:06:32.387

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

it is a good fix, but I think he is adding a button that really should only be there once. nice answer tho. — Bibberty, Jan 06 '19 at 02:58

score 2 · Answer 2 · answered Jan 06 '19 at 02:49

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.

answered Jan 06 '19 at 02:49

William Bright

535
3
7

Button added by javascript not triggering click event

2 Answers2