对于动态加载内容 (包括 Ajax 请求内容) 绑定点击事件
0 / 0 / 创建于 5年前 /
_zzh 的个人博客
1. 问题展现#
首先看看如下代码执行：
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<div id="the_div">
</div>
<button id="btn">test</button>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
$('#the_div').append('<button>new button</button>');
})
$('#the_div button').click(function(){
alert('clicked');
})
</script>
</body>
</html>
初始时会监听 #btn 即 test 按钮，以及 #the_div button 即 div 中的所有按钮的 click 事件。当点击 test 按钮后 div 内会动态添加 new button 按钮，而我们期望点击 new button 按钮后，会弹出一个 alert，但事实上这么做是不会触发 alert 的。
2. 问题分析#
.click() 实际上是.on( "click", handler ) 的简化，而 $( selector ).on( events, handler ) 只会对当前已经存在，且满足 selector 条件的元素绑定 events，也就是说，这个绑定只针对于当前存在的元素，而在其之后加入到 DOM 中的元素，即使满足 selector 条件，也不会绑定对应的 events。
3. 解决方案#
实际上 jQuery 也有专门的方法解决这个需求，即 [.live ()]，$( selector ).live( events, handler ) 会对所有当前和未来满足 selector 条件的元素绑定对应的 events。
但从 jQuery 1.9 开始，.live() 就被移除了。
在.live() 的 API 文档中，官方就给出了替代.live() 的方法，即目前最常用的方法：$( document ).on( events, selector, data, handler );
$( "a.offsite" ).live( "click", function() {
alert( "Goodbye!" ); // jQuery 1.3+
});
$( document ).on( "click", "a.offsite", function() {
alert( "Goodbye!" ); // jQuery 1.7+
});对于上述例子的解决方案：
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<div id="the_div">
</div>
<button id="btn">test</button>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script>
$('#btn').click(function(){
$('#the_div').append('<button>new button</button>');
})
//解决方案
$('body').on('click','#the_div button',function(){
alert('clicked');
})
</script>
</body>
</html>原文：https://www.polarxiong.com/archives/jQuery...
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号