Cannot Click button when table row with button is appended

Question

$('#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?

use event delegation method: `$(document).on('click','.deleteClass',function(){});` — Bhojendra Rauniyar, Jun 28 '15 at 08:30
possible duplicate of [Event binding on dynamically created elements?](http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Bhojendra Rauniyar, Jun 28 '15 at 08:32

score 3 · Accepted Answer · answered Jun 28 '15 at 08:31

3

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

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

answered Jun 28 '15 at 08:31

Varun

1,950
2
8
16

1

you should not delegate to document if you know parent. – dfsq Jun 28 '15 at 08:35
@dfsq Agreed,i just gave the generalized answer,it should be the NEAREST STATIC ANCESTOR. – Varun Jun 28 '15 at 08:40

score 0 · Answer 2 · edited Jun 28 '15 at 20:14

0

You can use this one instead:

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

edited Jun 28 '15 at 20:14

Ionic

3,704
1
9
33

answered Jun 28 '15 at 08:58

Md Atiqul Haque

114
3

Cannot Click button when table row with button is appended

2 Answers2