jquery 动态添加的元素 绑定事件click失效

Posted 2023-05-04

这是一段jquery代码，绑定checkbox的click事件
$(document).ready(function()
$("input[type='checkbox']").click(function()
if($(this).parent().parent().parent().parent().attr("id")!='fkbm')
alert($(this).parent().parent().parent().parent().attr("id"));
……………………

);
);
对应初始加载的checkbox的click是生效的，但是又通过js的append添加了新的checkbox，百度说是因为动态添加的控件没有注册的原因，想请问如何解决这个问题。
动态添加checkbox的js代码如下
$(function()
$("#btn2").click(function()
$("#sxsp").append("<tr><td><input type='checkbox' ></td>……</tr>");
);
);

这就是“为未来元素添加事件”的方法了，

jquery里为未来元素添加事件的原理很简单，既然这个元素是未来的，那么我们可以把事件绑定在已经存在的元素上，然后在发生点击的时候，再来判断所点击的对象，是否为我们要的对象，然后再触发事件。

$("div#id").on("click","button.do",function()
    //具体的内容
);

上面这段代码解释起来就是，给div#id绑定一个click事件，并且触发事件的对象为button.do时，开始执行具体的内容。

不管button.do是否为已经存在的，还是未来添加的，都能执行。

对于你的问题，同理就能解决，

$("input[type='checkbox']").click

你的这句，把事件绑定到最近的父元素里，不要绑在离“太远”的父元素上，影响代码的执行效率，

参考技术A 用事件委托的方式
如下：
$(document).on("click","input[type='checkbox']",function()
if($(this).parent().parent().parent().parent().attr("id")!='fkbm')
alert($(this).parent().parent().parent().parent().attr("id"));
……………………

);

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

我们可以通过 $(document).on(‘click‘, ‘#xxx‘, callback) 这种形式解决。

 

原因，一般情况下，我们是通过 $(‘#xxx‘).click(callback) 这种形式去绑定，这种绑定之所以生效是因为，我们程序加载 $(function(){}) 的时候绑定了回调，而动态添加上去的，我们并没有去绑定。

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

 

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

$(‘.level‘).change(function(e){window.e = e;})
console.log(e);

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

也就是说，我们动态添加的元素，产生的事件可以在他们父级的元素上获取，比如：

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

这样一来，我们动态添加的元素，虽然本身没有绑定处理函数，但是会在他们的父级元素捕获并处理了。