Attaching .click methods to classes loaded via Ajax

I'm getting slightly lost as to .click events being attached to dynamically loading data from other pages...

I have a main table. The first column of each row is clickable to load a sub-table. Said sub-table should act in the same way, clicking the first value opening a sub-sub-table.

<table>
  <tr>
    <td class="ClickMe" id="1">Title Of Row</td>
    <td>Main Data1</td>
    <td>Main Data2</td>
  </tr>
  <tr>
    <td class="ClickMe" id="2">Title Of Row</td>
    <td>Main Data1</td>
    <td>Main Data2</td>
  </tr>
</table>
<script type="text/javascript">
$(function () {
  function LoadSub1(inputRowID)
  {
    $.ajax({
      url: 'SomePage.php',
      data: 'ID='+inputRowID,
      success: function(data){
        $("#Details1").html(data);
      }
    })
  }

  $("td.ClickMe").click(){
    // remove previous ad开发者_如何学Cded row
    $("#AddedRow").remove();

    // Get new id
    var RowID = $(this).attr("id");

    // Create new row with <div> to populate
    $(this).after("<tr id="AddedRow"><td><div id="Details1"></div></td></tr>");

    // Load sub-table into <div>
    LoadSub1(RowID);
  }

  $("td.ClickMe2").click(){
    var subRowID = $(this).attr("id");
    // some further table loading based on sub-table id value
  }
}
</script>

If the "SomePage.php" has a table with a tag, the .click() event in the main page fails to trigger.

Any suggestions? Help most appreciated.

---

The event handlers bound with .click() are only applied to elements currently in the DOM. To bind event handlers to elements now and in the future, use .live() or .delegate():

With .delegate() (recommended):

$("#Details1").delegate("td.ClickMe", "click", function () {
    // remove previous added row
    $("#AddedRow").remove();

    // Get new id
    var RowID = $(this).attr("id");

    // Create new row with <div> to populate
    $(this).after("<tr id='AddedRow'><td><div id='Details1'></div></td></tr>");

    // Load sub-table into <div>
    LoadSub1(RowID);
}

With .live():

$("td.ClickMe").live("click", function () {
    // remove previous added row
    $("#AddedRow").remove();

    // Get new id
    var RowID = $(this).attr("id");

    // Create new row with <div> to populate
    $(this).after("<tr id='AddedRow'><td><div id='Details1'></div></td></tr>");

    // Load sub-table into <div>
    LoadSub1(RowID);
}

(also fixed the quotation marks in your appended html)

---

Anytime you replace HTML, any click statements do not persist, because the original element doesn't exist. So after AJAX requests, for click, you'd have to restablish any existing click statements.

Live works differently, using the live method automatically restablishes the click event to the targeted controls even as the DOM changes. Check out the documentation here: http://api.jquery.com/live/

HTH.