jQuery selector not firing after dynamically adding a row to a table

Question

I have a table as

<table id="table1">
   <tr>
      <td>Cell 1</td>
      <td>Cell2</td>
   </tr>
</table>

On selecting a cell

$('#table1 tr td').bind('click', function(){
     alert('Selected');
})

However, when I add a cell dynamically

$(this.parentNode).after('<tr><td>Cell 3</td><td>Cell 4</td></tr>');

Now, when I click the Cell 3 or Cell 4, the alert message is not fired.

How can this be fixed without refreshing the page?

Answer 1

User jquery "on" method instead of bind. https://api.jquery.com/on/ It's main dif from bind is that it performs kind of watch for element in selector and add 'live bind'. Here is the sample: http://jsbin.com/yapiheju/1/edit

Answer 2

You will have to reassign the event listeners to the new DOM nodes too. Right after dinamically adding a cell, make sure you set a listener on it too.

jQuery docs: Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on(). Event handlers are bound only to the currently selected elements; they must exist on the page at the time your code makes the call to .on().

Or you could use delegated events along with jQuery's on , as other users suggested. All you have to do is to figure out which element that is closer to the core document in the DOM than your cells are, is surely to be present as a real node by the time you attach the events. In your case, it would be best to choose the document itself as you will not need to wait for the whole DOM to load.

Now, just set the click event to the document . So everytime a click event will get to the document (by directly clicking it or by bubbling to it), the callback will be fired. But we don't want that. Well, it's simple. Just pass one more argument to the .on() method, between the event name and the callback. This argument will be a selector string pointing to the descendants which will be allowed to bubble this specific event up to the document .

Answer 3

Use the jquery on

eg.

$(document).on("click", 
    "#table1 tr td", function(){ 
    alert('Selected'); 
}); 

Documentation here: http://api.jquery.com/on/