无法单击使用jquery创建的表

我正在使用jQuery创建一个包含图像的表。 我的js代码看起来像这样：

$(document).ready(function() { var korpusArray = new Array(); $.getJSON("file.js", function(data) { var korpusId; var korpusChooseTable = ""; $.each(data, function(i, value) { korpusArray.push(value.text); strRemove = value.filename.replace("korpus/", ""); korpusChooseTable += ''; }); korpusChooseTable += '
'+value.title+'
'+value.id+'

'; $("#korpusChoose").html(korpusChooseTable); console.log(korpusArray.length); console.log(data.length); }); // after this I wanna click on table cell and do some function but // it doesnt work. Can somebody tell me what I'm doing wrong? $("#korpusChoose #TableKorpusGaleria tbody td").click(function() { alert(); }); }); 

Answer 1

对动态创建的项使用委托 – 如果绑定时元素不存在…通常在dom准备好 – 那么不会附加事件处理程序

jQuery 1.7及以上http://api.jquery.com/on/

 $("#korpusChoose ").on('click','#TableKorpusGaleria tbody td',function(){ alert(); }); 

或者jQuery 1.6到jQuery 1.4.3 http://api.jquery.com/delegate/

 $("#korpusChoose ").delegate('#TableKorpusGaleria tbody td','click',function(){ alert(); }); 

根据其后继者重写.live（）方法很简单; 这些是用于所有三种事件附件方法的等效调用的模板：

$（selector）.live（events，data，handler）; // jQuery 1.3+

$（document）.delegate（selector，events，data，handler）; // jQuery 1.4.3+

$（document）.on（事件，选择器，数据，处理程序）; // jQuery 1.7+

另一种方法是在将其添加到dom后立即添加

 $("#korpusChoose").html(korpusChooseTable); 

紧接着

 $("#korpusChoose #TableKorpusGaleria tbody td").click(function(){ alert(); }); 

虽然后者的效率较低，因为您将事件处理程序绑定到表中的每个td元素 – 使用委托只将它绑定到存在于dom中的父元素，并在事件冒泡时处理该事件

Answer 2

因为表是动态创建的，所以您需要使用jquery的on来使用事件委托 。 这将允许您在元素存在之前附加处理程序。

 $("#korpusChoose #TableKorpusGaleria tbody td").click(function(e){ 

反而会

 $("container").on("focus", "#korpusChoose #TableKorpusGaleria tbody td",function(e){ 

其中container是一些静态祖先元素的选择器，它不是动态加载的。 如果不存在这样的容器，则可以使用document ，尽管应尽可能避免使用。

Answer 3

因为表是动态生成的，所以您可以使用：

 $('#mytable').live('click', function() { // Click event handler action here... }); 

使用live（）方法绑定事件处理程序，它们也将在由AJAX调用或类似动作创建的元素上触发。

更新：由于.live（）自JQuery 1.7以来已被弃用，感谢Andrew，考虑使用.on（）进行事件委派。

Answer 4

使用jquery $("table").live("click",function(){ }); 为现在和将来与当前选择器匹配的所有元素附加事件处理程序。 Jquery click仅绑定文档中当前元素的click事件。

http://jsfiddle.net/wFcpP/3/