异步请求数据后,动态向table中追加行,行点击事件失效

 我来答
ml4w5
2015-08-08 · TA获得超过1394个赞
知道小有建树答主
回答量:625
采纳率:25%
帮助的人:647万
展开全部

动态加入到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标签并没有继承点击事件,点击无任何反应。解决办法有两种:

  1. 纯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);
    }
  2. 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 广告
Play Video 七鑫易维是致力于机器视觉和人工智能领域的高新科技企业,迄今已专注眼球追踪技术的研发、创新与应用超过14年,拥有完全自主知识产权,全球专利总量655余项。 作为眼球追踪技术领域的全球知名品牌,七鑫易维的产品体系覆盖眼动分... 点击进入详情页
本回答由七鑫易维信息技术提供
jack观天下
2015-08-08 · 带你看天下趣闻,有意思的视频!
jack观天下
采纳数:832 获赞数:3143

向TA提问 私信TA
展开全部
用on绑定到上级元素上面
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式