企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

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

JavaScript笔记 码云 75℃ 0评论

近期做项目的时候有这么一个需求,动态添加表格,点击新增按钮在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代码,问题完美解决。

转载请注明:码云笔记 » jquery动态添加td导致元素绑定的事件失效的原因及解决方法

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址