通过 ajax 动态创建表中断 .on 功能答案

【问题标题】：Dynamically created table via ajax breaks .on functionality通过 ajax 动态创建表中断 .on 功能
【发布时间】：2012-02-14 18:09:02
【问题描述】：

我正在使用ajax 来动态创建一个表。当有人输入查询时，会创建一个表（数据）并替换#content-display 中的内容：

function searchQuery(query){    
    $.ajax({
      url: "search.php",
      data: {term: query},
      success: function(data){
          $("#content-display").html(data);
      },
      dataType: 'html'
    });     
}

当有人点击表格中的一个条目时，我想提醒用户他们点击了什么：

$(document).ready(function(){    
    $("#myTable tbody tr").on('click', function (){    
        alert($(this).children(":first")text());       
    });    
});

但是.on 方法对我不起作用。当我将.on 替换为.live 时，它会提醒用户他们刚刚点击的内容，但由于.live 已被弃用，我该如何更改.on 方法的语法以使其正常工作？

【问题讨论】：

你的 HTML 是什么样的？ #myTable 在 #content-display 里面吗？如果是这样，那会在 #content-display 被替换时破坏你的处理程序。
代码中缺少一个点...children(":first")text()); ==> children(":first").text());

标签： javascript jquery events live

【解决方案1】：

$(document).ready(function(){    
    $("#content-display").on('click', '#myTable tbody tr', function (){    
        alert($(this).children(":first").text());       
    });    
});

【讨论】：

@LedZeppelin。所以将#myTable 更改为包含该表的最近的静态元素。也许#content-display？
#myTable 是动态的以及添加的行吗？您希望最近的 permanent dom 元素绑定到。否则 gdoron 的代码没有理由不工作。
@LedZeppelin。没问题。我很高兴能帮上忙。

【解决方案2】：

为什么不使用

$("#myTable tbody tr").click(function() {});

改为？

【讨论】：

是的，我阅读了这个问题，但它没有提到需要动态的事件类型。不过感谢您的反对票。
"我正在使用ajax动态创建表。当有人输入查询时，会创建一个表（数据）并替换#content-display里面的内容："。顺便说一句，你没有得到任何反对票（还）......
否决票被推翻。所有引用的文章都说该表是动态创建的。作者继续解释说，点击事件是他唯一捕获的事件。同样，作者没有提到事件类型是动态的。
您根本没有获得选票。我可以看到投票。阅读this