CODEWITHSUNDEEP
javascriptjqueryhtml
Joey Dohnson
Joey Dohnson

Reputation: 55

Cannot Click button when table row with button is appended

https://jsfiddle.net/r7a2r9eL/

$('#insertBtn').click( function(){
    $('#mytable > tbody:last-child').append('<tr><td>'+$('#fnameText').val()+'</td><td>'+$('#lnameText').val()+'</td><td>'+$('#pointText').val()+'</td><td><button type="button" class="deleteClass">Delete</button></td></tr>');
    $('#textTable input').val('')
});

$(".deleteClass").on("click",function() {
    alert('row deleted');
});

Try typing anything into the textboxes. Then click on the insert button. Then click on the delete button on the first column. Notice the alert didn't trigger even though the button has the intended class

What is wrong with my code?

Upvotes: 2

Views: 428

Answers (2)

Md Atiqul Haque
Md Atiqul Haque

Reputation: 114

You can use this one instead:

 $("#mytable").on("click",'.deleteClass',function() {
        alert('row deleted');
 });

Upvotes: 0

Varun
Varun

Reputation: 1946

What you are looking for is event delegation: Use this:

 $(document).on('click','.deleteClass',function()
 {
      //DELETE CODE HERE.
 });

Upvotes: 3

Related Questions