Question

I am using JQuery to add a row to a table. Within the row is an element who’s click event I am capturing:

$(document).ready(function() {
   var newRow = "<tr> ... </tr>";
    $('tableName > tbody:last').append(newRow);

   $(...).click( function() { // click event on newly inserted elem in the row
      alert("click");
   });
}

This works great and the alert comes up as expected. BUT when I now add the new row dynamically via an ajax call and parsing the xml, it stops working:

$(document).ready(function() {
   getData();

   $(...).click( function() { // click event on newly inserted elem in the row
      alert("click");
   });

   function getData() {
      $.ajax({
          ...
          success: function(data) {
             //parse the xml

             $('tableName > tbody:last').append(parsedXml);
          }
   });
}

The html is correctly added to the DOM, but the click event is no longer captured. Is there some issue with scope or closures going on here?

Answer 1

use

 $(...).live('click', function() { // click event on newly inserted elem in the row
      alert("click");
   });

This keeps the click event running after it has been used

more info