Generate new table row and capture click of that row JQuery

Question

I am trying to do the following,

I have a table within the table I have an input with a button when the button is clicked a new row is added, I then wish to capture any click upon a new row element.

<table id="mytable">
<tr>
    <td><input type="textbox" class="mytb"/></td>
    <td><button id="addButton">Add New Row</button></td>     
</tr>
</table>​

$(document).ready(function(){

// generate new row
$('#addButton').on('click', function(event){
  event.preventDefault();                 
  var newRow = '<tr><td><input type="text" class="newtb"/></td></tr>';
  $('#mytable').append(newRow);        
});

// capture click of new row?
$('.newtb').on('click', function(event){
    event.preventDefault();  
    alert('clicked');
});
});

JSFiddle example

I am stuck in that the new row is created but the click event is not captured.

If anyone could point me in the right direction I would be very grateful, but could someone please explain why this is happening as I am really stuck and want to increase my JavaScript knowledge.

Answer 1

I have run into this several times recently. If you bind the event to the new table row as you are doing, it won't work. The reason is that the rows don't exist at the time you do the binding. You could use live, but I think it is being deprecated in favor of the following style.

You can use on to bind it to the table like this:

$('#myTable').on('click', '.newtb', function (event) {
    //Do stuff
});

This sets the event on the table, which already exists in the DOM at the time of the binding.

Hope that makes sense....

Answer 2

$('body').on('click', '.newtb', function(event){
    event.preventDefault();  
    alert('clicked');
});

Demo

Answer 3

Please see the following update in your fiddle.

http://jsfiddle.net/suF7b/8/

You need to make that event binding every time you add new code.

$('#mytable').append(newRow);
captureEvent();

function captureEvent() {
    // capture click of new row?
    $('.newtb').on('click', function(event){
        event.preventDefault();  
        alert('clicked');
    });
}

Answer 4

Use Event delegation ... => FIDDLE HERE <=

// To me, detecting the target element "by hand" is the best way !

// because you can fully handle the way you detect clicked elements ...

$('#mytable').on('click', function(e){
    var $target = $(e.target), $tr = $target.closest('tr');
    if($tr.length)){
      //  $tr.get(0) is the clicked TR element
      alert($tr.get(0).nodeName+' clicked !'+"\n"+e.target.nodeName+' the actual clicked element');
      event.preventDefault();
      return false;
    }
});

- Alternative to deprecated "live" method : use "on" method with delegation signature instead

$('#mytable').on('click', 'tr', function(event){
    // don't know if any element inside the tr will be caught while clicking on it
});

Answer 5

Look at this jsfiddle:

JSFIDDLE

<table id="mytable">
<tr>
    <td><input type="textbox" class="mytb"/></td>
    <td><button id="addButton">Add New Row</button></td>     
</tr>
</table>​

$(document).ready(function(){

// generate new row
$('#addButton').on('click', function(event){
  event.preventDefault();                 
  var newRow = '<tr><td><input type="text" class="newtb"/></td></tr>';
  $('#mytable').append(newRow);        
});

// capture click of new row?
$('.newtb').on('click', function(event){
    event.preventDefault();  
    alert('clicked');
});
});