web前端开发个人技术博客
当前位置: JavaScript > jquery动态添加td导致元素绑定的事件失效的原因及解决方法

jquery动态添加td导致元素绑定的事件失效的原因及解决方法

2018-10-31 分类:JavaScript 作者:码云 阅读(196)

近期做项目的时候有这么一个需求,动态添加表格,点击新增按钮在table内新增一行tr且tr的td内有相关点击事件的绑定,这个需求实现起来并不难,有两种方法,一种是直接写好需要添加的td内容,直接append;另一种是拼接一个字符串,然后利用append()方法添加即可,然而新增很简单,但是出现了一个小问题,那就是新增上的内容中的事件绑定不管用,完全是失效的,这可如何是好?!别担心,方法总比问题多。

我的绑定事件是这么写的:

1
2
3
4
$("add").on({
   "click" : function () {
    }
})

这样用on()方法为元素绑定事件一点毛病没有,但是与我们预期的效果却是事与愿违,发现这样的绑定事件方法对于动态添加的没有起到监听作用,如何解决jQuery使用on()绑定动态生成元素的事件无效问题呢?一起来看一下我的分析:

动态插入的dom绑定事件,需要在dom插入完成后绑定事件,或者使用on的另一种写法,因为你的dom节点还没有渲染出来出来你的点击事件就绑定上了,我们可以设置一个定时器,或者注意一下节点添加和事件绑定的顺序。

解决方法:

事件委托绑定模式:
事件委托绑定模式下,即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。

1
2
3
$('element').on('click','selector ',function(){
console.log("www.mybj123.com");
});

element  代表页面中存在的元素,父级或者其他祖先,最狠的就用 document。

selector  你需要绑定的元素。

当你使用了该方法后,其返回的值是刚刚添加的html代码,问题完美解决。

「本文为原创文章,版权归码云笔记所有,欢迎分享本文,转载请保留出处!」

赞(7) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
7

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - jquery动态添加td导致元素绑定的事件失效的原因及解决方法

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

精彩评论