如何给JQuery生成的动态元素绑定事件

$(document).ready(showInfo());
function showInfo(){
$.ajax({
url : "showInfo",
async : true,
type : "post",
dataType : "json",
success : function(info){
var table = $("<table border=\"1\">");
table.appendTo(($("#showInfo")));
for(var i=0;i<info.length;i++){
var tr=$("<tr></tr>");
tr.appendTo(table);
var firstMenuTd=$("<td class=\"firstMenu\">" + info[i].firstMenu+ "</td>");
var secondMenuTd=$("<td>" + info[i].secondMenu + "</td>");
var contentTd=$("<td>" + info[i].content + "</td>");
var authorTd=$("<td>" + info[i].author + "</td>");
var timeTd=$("<td>" + info[i].time + "</td>");
var respondTd=$("<td></td>");
var respondButton=$("<button class=\"respond\">响应</button>");
firstMenuTd.appendTo(tr);
secondMenuTd.appendTo(tr);
contentTd.appendTo(tr);
authorTd.appendTo(tr);
timeTd.appendTo(tr);
respondTd.appendTo(tr);
respondButton.appendTo(respondTd);

}
$("#showInfo").append("</table>");
}
})
}
================================================================================================
<body>
<div id="showInfo"></div>
</body>

用JQuery生成了一个表格展示信息，想给每条信息后面的Button绑定事件，我用了
$("#showInfo").on("click","button",function(){})并不管用，求大神告知如何解决。

7 个解决方案

#1

简化点
var tab="<table>";
var tr="<tr>"
var td="";
for(var i=0;i<info.length;i++){
      td="<td class=\"firstMenu\">" + info[i].firstMenu+ "</td>";
      td=td+"<td>" + info[i].secondMenu + "</td>";
      td=td+"<td>" + info[i].content + "</td>";
      td=td+"<td>" + info[i].author + "</td>";
      td=td+"<td>" + info[i].time + "</td>";
       td=td+"<td><input type='button' value='按钮' onclick='shijian()'></td>"
      tr=tr+td+"</tr>"
      tab+=tr;
}
tab=tab+"</table>";
如果你按钮事件都是不同的：
td=td+"<td><input type='button' value='按钮' onclick='shijian“+i+”()'></td>"

#2

$("#showInfo").on("click","button",function(){

    // do something

});

jQuery 的这种事件代理（事件委托）本身是没问题的。
你得看看上面注册事件的语句是否放在了 $(document).ready( function(){ ... } ) 里面。

另外 $(document).ready(showInfo()); 好奇怪啊，
为什么不这样写

$(document).ready( function(){  

    showInfo();

 } )

#3

引用 2 楼 wuqinfei_cs 的回复:

$("#showInfo").on("click","button",function(){

    // do something

});
jQuery 的这种事件代理（事件委托）本身是没问题的。
你得看看上面注册事件的语句是否放在了 $(document).ready( function(){ ... } ) 里面。

另外 $(document).ready(showInfo()); 好奇怪啊，
为什么不这样写
$(document).ready( function(){  

    showInfo();

 } )

#4



var $a = $("<a/>");

$a.click = function(){

    alert('bind click');

}

#5

·=·因为新生成的节点没有被js算在内，要重新加载一遍，才能把新的节点加进去。解决办法是动态事件绑定在新加的节点的父节点上，或者body上，这样每次事件触发，会扫描一遍子节点，把新节点也加进去触发。

#6

jquery1.72之后的版本要这样写
$(document).on("click","#showInfo button",function(){})

之前的版本使用的是live，live已经废弃了

#7

或者这样写
$(document).on("click",".respond",function(){
alert("click")
})

#1

#2

$("#showInfo").on("click","button",function(){

    // do something

});

$(document).ready( function(){  

    showInfo();

 } )

#3