jquery 动态添加的元素，绑定的事件不生效

Posted 2023-02-21 猎人在吃肉

1、问题说明

原来的方法：

$('#xxx').on('click', function()
   // 事件处理函数 
);

如果是固定的静态html ，上面的事件是没有什么问题的；
如果 通过Jquery 动态地添加 html 元素，上面的事件不生效，事件没有绑定上。

2、分析

一般情况下，通过 $('#xxx').click(callback) 这种形式去绑定，这种绑定之所以生效是因为，程序加载 $(function() ) （即 load()， 页面加载完成后） 的时候绑定了回调函数， 而动态添加上去的元素，我们并没有去绑定事件。

因此， 动态添加的元素，点击的时候并不会触发我们想要的效果。但是实际上，在我们点击的时候，还是产生了点击事件，只是这个事件没有被我们的预期回调处理，因为我们的回调没有和这个元素关联起来。

jquery 的事件处理函数中，回调的第一个参数就是事件，我们打印一下这个事件，就可以知道，这个事件包含了产生该事件的目标 html 元素。

$('.level').change(function(e)window.e = e;)
console.log(e);

并且，我们也知道，事件是会冒泡的，也就是说，如果我们添加的元素没有绑定事件，没有捕获事件，它就会冒泡，看它上一级是否有捕获，然后一直到 body->document->html 这些元素。

综上所述，我们得到下面的的格式：

父选择器.on("事件类型" , 子选择器 , function()  ... );

说明：

父元素

• 必须 是固有元素 ，可以直接父元素，也可以是间接父元素。
• 固有父元素 范围越小越好。
• 事件类型：跟事件属性和事件函数一一对应。
• 子选择器：目标元素，跟父选择器构成一个父子选择器。
• 不但能给固有元素添加事件，还能够给动态生成的元素添加事件。

3、解决方法

动态添加的元素，产生的事件可以在他们父级的元素上获取并处理。

原来的方法：

$('#xxx').on('click', function()
   // 事件处理函数 
);

优化后的：

$(document).on('click', '#xxx', function()
   // 事件处理函数 
);

4、参考

http://t.zoukankan.com/eleven24-p-8057530.html

https://blog.csdn.net/m0_62639693/article/details/126801671