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

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

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

$("add").on({
   "click" : function () {
    }
})

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

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

解决方法:

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

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

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

selector  你需要绑定的元素。

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

「点点赞赏,手留余香」

9

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » jquery动态添加td导致元素绑定的事件失效的原因及解决方法

发表回复