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方法会自动将click事件重新定位到目标控件，即使DOM更改也是如此。在这里查看文档：{{3}}

HTH。

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

2 个答案: