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