jQuery click event not working for dynamically added elements

Question

I have been trying to use jQuery on this code but it is not responsive. I dynamically try to add some rows to the end of an HTML table and I have also included a cancel button. The click function on the cancel button doesn't seem to work.

I can't post full code here, so I included a link to the jsFiddle.

Part of JavaScript code:

$('#myTable tbody:last').after('<tbody class="newrow"><tr><td> <input  type="text" class="app"></td><td><input type="text" class="env"> |\n\
 </td><td><input type="text" class="region"> | </td><td><input type="text"  class="url"> | \n\
</td><td><button class="cancel">X</button></td>\n\
</tr></tbody>');          
}

$('.cancel').on('click', function() {
    alert();
   //$(this).closest('tbody').fadeOut(2000); 
});

Alex Andrei · Accepted Answer · 2015-11-14 15:32:52Z

3

You need to use delegated events in order to catch click events for dinamycally added elements.

After you implement the changes proposed in the comments, change your click handler to this

$('body').on('click','.cancel', function() {
    console.log($(this));
    //$(this).closest('tbody').fadeOut(2000); 
});

This will output in the browser console, the button that has been clicked, it should work on the new elements also.

answered Nov 14, 2015 at 15:32

Alex Andrei

7,2763 gold badges30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lajon · Accepted Answer · 2015-11-14 15:36:56Z

Create unique class for each cancel obj

<button class="cancel' + counter + '">X</button>

and initiate the trigger then, full solution:

     var counter = 0;//specify counter variable to create unique cancel class
     $('.addfinal').click(function(){   
          n=$('.addno').val();
          for(var i=0;i<n;i++){

         $('#myTable tbody:last').after('<tbody class="newrow"><tr><td><input type="text" class="app"></td><td><input type="text" class="env"> |\n\                  </td><td><input type="text" class="region"> | </td><td><input type="text"      class="url"> | \n\</td><td><button class="cancel' + counter + '">X</button></td>\n\</tr></tbody>');
     } 


            cancel($(".cancel"+counter))
            counter++;
     });
});

When you initiate click event for cancel class then that class doesn't exists yet, try to wrap it in the function and attach this click event for each cancel obj that you will create with the row, your cancel objects will have a unique id now thanks to counter variable (see above).

function cancel($obj){
    $obj.on('click', function() {
         console.log($(this).closest('tbody'))
         $(this).closest('tbody').fadeOut(2000); 
    });
}

Collectives™ on Stack Overflow

jQuery click event not working for dynamically added elements

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related