将 .click 方法附加到通过 Ajax 加载的类

Question

对于附加到从其他页面动态加载数据的 .click 事件，我有点迷茫......

我有一张主桌。每行的第一列可单击以加载子表。所述子表应以相同方式操作，单击第一个值打开子子表。

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

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

如果“SomePage.php”有带标签的表格，则主页面中的.click()事件触发失败。

有什么建议吗？非常感谢您的帮助。

Answer 1

.click() 绑定的事件处理程序仅适用于当前在 DOM 中的元素。要将事件处理程序绑定到现在和将来的元素，请使用 .live() 或 .delegate()：

.delegate()（推荐）：

$("#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);
}

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

（还修复了附加 html 中的引号）

Answer 2

无论何时替换 HTML，任何点击语句都不会保留，因为原始元素不存在。因此，在 AJAX 请求之后，对于单击，您必须重新建立任何现有的单击语句。

Live 的工作方式不同，即使 DOM 发生变化，使用 live 方法也会自动将点击事件重新建立到目标控件。在此处查看文档：http://api.jquery.com/live/

HTH。