CODEWITHSUNDEEP
jqueryhtmlonclick
Deviland
Deviland

Reputation: 3374

Generate new table row and capture click of that row JQuery

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.

Upvotes: 0

Views: 1855

Answers (5)

Stphane
Stphane

Reputation: 3456

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

Upvotes: 0

Pulkit Mittal
Pulkit Mittal

Reputation: 6076

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

Upvotes: 0

Alessandro Minoccheri
Alessandro Minoccheri

Reputation: 35963

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

Upvotes: -1

David John Welsh
David John Welsh

Reputation: 1569

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....

Upvotes: 2

Pragnesh Chauhan
Pragnesh Chauhan

Reputation: 8476

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

Demo

Upvotes: 1

Related Questions