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

关于.click事件被附加到从其他页面动态加载数据，我有点迷失…

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

 
 
Title Of Row
 
Main Data1
 
Main Data2
 
 
 
Title Of Row
 
Main Data1
 
Main Data2
 
 
  $(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 
 to populate $(this).after("
"); // Load sub-table into 
 LoadSub1(RowID); } $("td.ClickMe2").click(){ var subRowID = $(this).attr("id"); // some further table loading based on sub-table id value } }  

如果“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 
 to populate $(this).after("
"); // Load sub-table into 
 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 
 to populate $(this).after("
"); // Load sub-table into 
 LoadSub1(RowID); } 

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

Answer 2

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

实时工作方式不同，使用live方法会自动将click事件重新定位到目标控件，即使DOM更改也是如此。 查看以下文档： http ： //api.jquery.com/live/

HTH。