您的位置:首页 > Web前端 > JQuery

关于jquery 的绑定事件on 如何绑定动态生成的dom元素

2017-04-20 14:56 841 查看
今天遇到个问题,在table里面动态更新数据,然后每一行会绑定相应的点击事件

我原本是想用 可作用于未来元素的on方法,但是实际上还是没有起作用,代码如下:

$(".form-table tbody tr").on("click",function () {})

这段代码在页面加载时的表格中是起作用的,但是当ajax动态更新表格数据之后就不起作用了,原因是jq读到这段代码时,浏览器还没更新html代码呢所以找不到,也触发不了点击事件。

解决方法:

$("body").on("click",".form-table tbody tr",function () {})


具体参数信息:

events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择器为null或省略,当它到达选定的元素,事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写,返回false。

PS:引用  bjwzds 
   的一段话

有人提出了事件委托,那么对于这种动态添加的事件,我建议这么写:
function $domOfSth(text){
return $("<a href='#' class='tseleced btn_confirm'>"+text+ "<span class='tags_closebtn'>X</span></a>").on('click','.tags_closebtn',function(){
console.log('xxxx');
});
}

$('#xxx').append($domOfSth('xxx'));


这样的优势在于:

在$domOfSth函数里面,这个dom可以绑定事件的写法相当灵活

对于事件一目了然,可维护性好

事件绝对牢牢绑定在插入dom上,不会因为js读到
$(".tags_closebtn")
这一句的时候,页面找不到这个对象的尴尬。。。 

这个尴尬刚好是你点击事件未绑定到插入的dom上的原因。因为,js读到
$(".tags_closebtn").on('click')
的时候,浏览器还没更新html代码呢,然后jq就跑去找,发现tm页面上根本没有这个类,是假的,是化学的成分。。。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息