异步请求数据后,动态向table中追加行,行点击事件失效
2个回答
展开全部
动态加入到DOM中的对象无法继承原有的事件,所以无效,举例:
// $.ajax... ajax部分省略
var tr = "";
if(data.length){
for(var i=0; i<data.length; i++){
tr = '<tr>';
tr += '<td>' + data.status == 0 ? "正常" : "报警" + '<td>';
tr += '</tr>';
$("#table1").find("tbody").append(tr);
}
}
// tr的点击事件
$("#table1 tbody").find("tr").click(function(){
// do something
});
上面的例子中,table1中原有的tr标签有点击事件,而通过ajax获取数据动态创建添加到DOM中的tr标签并没有继承点击事件,点击无任何反应。解决办法有两种:
纯js方法:将tr的点击事件写成函数,然后为动态创建的tr标签添加该函数的onclick事件:
for(var i=0; i<data.length; i++){
tr = '<tr onclick="OnTrClick()">'; // 创建时为tr指定click事件
tr += '<td>' + data.status == 0 ? "正常" : "报警" + '<td>';
tr += '</tr>';
$("#table1").find("tbody").append(tr);
}jquery方法:jquery中可使用live()、on()两个方法来完成类似效果,其原理是利用事件委派机制,需要注意的是jquery 1.9版本已不再支持live()方法。
// tr的点击事件 (jquery 1.9以下)
$("#table1 tbody").find("tr").live("click", function(){
// do something
});
// tr的点击事件【推荐】 (jquery 1.7以上)
$("#table1 tbody").find("tr").on("click", function(){
// do something
});
七鑫易维信息技术
2024-09-02 广告
2024-09-02 广告
Play Video 七鑫易维是致力于机器视觉和人工智能领域的高新科技企业,迄今已专注眼球追踪技术的研发、创新与应用超过14年,拥有完全自主知识产权,全球专利总量655余项。 作为眼球追踪技术领域的全球知名品牌,七鑫易维的产品体系覆盖眼动分...
点击进入详情页
本回答由七鑫易维信息技术提供
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询