js动态生成的DOM绑定事件失效的问题

事件委托原理：事件冒泡机制。

优点：1. 可以大量节省内存占用，减少事件注册。比如ul 上代理所有li 的click 事件。

2. 可以实现当新增子对象时，无需再对其事件进行绑定。对动态内容部分尤为合适。

缺点：如果把所有事件都用事件代理，可能会出现事件误判。即本不该触发的事件被绑上了事件。

初学者会可能会遇到在js 动态生成的DOM元素中直接绑定事件，事件没有生效的问题。因为网页只执行一次初始化绑定，而此时通过js动态生成的DOM元素还未生成，导致绑定事件失败。

我常用的解决办法：

1. 将事件绑定到该动态生成的DOM 元素的父元素或其祖先元素上（事件委托）。注意，该父元素或祖先元素应该在网页执行初始化绑定时就已存在。可以使用jQuery 的 on()方法添加事件处理程序。

基本用法：$(parentSelector).on(event,childSelector,function)

2.若事件绑定元素的父元素或祖父元素都是动态生成的DOM 元素，则可以在js动态生成DOM 元素后，再绑定事件。

百度了一下事件委托的局限性：
比如 focus、blur 之类的事件本身没有事件冒泡机制，所以无法委托；
mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高，因此也是不适合于事件委托的；

js动态生成的DOM绑定事件失效的问题相关推荐

js 动态生成 input 的绑定事件 blur 无效
☯ 背景描述今天在进行代码编写时,我需要根据ajax返回的数据动态生成一个表格,而针对于其中的input标签,要求设置失去焦点的blur事件需要实现的界面截图如下: 最开始编写的 js 代码如下: ...
jquery每次动态加载dom,绑定事件会多一次,
jquery绑定事件,每次动态加载dom,绑定的事件会加1,比如动态加载dom5次,点那个点击事件会弹出5次解决办法就是在每次绑定之前解绑定. $('.seek-footer .btn1').off ...
动态生成数据后绑定事件
HTML代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta chars ...
ajax请求动态生成dmo无法绑定事件解决方案
前端 1.前端代码 2.后端代码因为使用ajax:是不会刷新dom元素结构的,我怎么绑定事件都不生效,用jquery的on也不行,后来用行内事件绑定的方式终于搞定了. 1.前端代码 <!DOC ...
js动态添加html元素绑定事件,JS实现动态添加DOM节点和事件的方法示例
本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: /p> "http://www.w3.org/TR/xht ...
动态生成的dom为什么绑定事件会失效，以及如何解决
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...
关于js中绑定事件失效问题
相信很多开始学习前端开发的朋友都发生过绑定事件失效的问题,那么究竟是什么原因使得事件失效呢? 这里作者以jquery库编写作为例子. 第一种:直接失效. <html> <head&g ...
JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）...
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效解决方法: 方案一:js动态生成元素后再给 ...
动态生成的DOM做点击事件无效
有时候我们的标签都是从后台获取的数据,然后利用JS添加到页面上,当我们写生成的标签的点击事件(click)时没有效果. 例如: <section>测试动态生成的DOM点击事件<br ...

js动态生成的DOM绑定事件失效的问题

js动态生成的DOM绑定事件失效的问题相关推荐

最新文章

热门文章