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

最新推荐文章于 2023-03-08 14:46:38 发布

cysear

最新推荐文章于 2023-03-08 14:46:38 发布

阅读量6.5k

点赞数 2

分类专栏： jQuery 文章标签： jquery on 动态不起作用绑定事件

本文链接：https://blog.csdn.net/cysear/article/details/70258307

版权

jQuery 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

今天遇到个问题，在table里面动态更新数据，然后每一行会绑定相应的点击事件

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

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

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

解决方法：

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

具体参数信息：

 
         on(events,[selector],[data],fn)

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页面上根本没有这个类，是假的，是化学的成分。。。