动态添加的元素绑定事件注意事项

最新推荐文章于 2022-01-28 14:00:17 发布

空山新雨君

最新推荐文章于 2022-01-28 14:00:17 发布

阅读量212

点赞数

分类专栏：前端 js 文章标签：前端 js

本文链接：https://blog.csdn.net/xxtz0522/article/details/85011820

版权

前端同时被 2 个专栏收录

51 篇文章 2 订阅

订阅专栏

17 篇文章 0 订阅

订阅专栏

问题描述：

页面加载时通过js、datatable插件等动态添加的元素，如：

"columns": [
                {"data": "", "title": "<input type=\"checkbox\" id=\"selectall\" class=\"exportSelect2\"><label for=\"selectall\" class=\"selectTag\"></label>"}
            ]

为其添加点击事件$('#selectall').click(function () {...})，结果没有触发。

原因：

页面初始化时为li元素绑定点击事件，但此时该元素还未加载完成，因此绑定无效。

解决：

动态添加元素时就同时添加onclick()，绑定点击事件：

"columns": [
                {"data": "", "title": "<input type=\"checkbox\" id=\"selectall\" onclick=\"selectall()\" class=\"exportSelect2\"><label for=\"selectall\" class=\"selectTag\"></label>"},
            ]

把$('#selectall').click(function () {...})执行的内容写在onclick()绑定的函数selectall()里