JQuery给动态添加的元素绑定事件
Posted 程序员爱学习
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery给动态添加的元素绑定事件相关的知识，希望对你有一定的参考价值。
在实际项目中，我们常常会动态的给界面Append元素，动态添加的元素如果要绑定某个事件，我们可以使用JQuery提供的 on()方法
定义和用法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
语法
$(selector).on(event,childSelector,data,function)
实例
下面是动态添加的元素不能触发事件的例子
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
5</script>
6<script>
7$(document).ready(function(){
8 $(".testBtn").click(function(){
9 alert("按钮被点击了");
10 });
11 $("#main").append("<button class='testBtn'>按钮</button");
12});
13</script>
14</head>
15<body>
16 <div id="main"></div>
17</body>
18</html>
上面例子中，点击动态append的按钮，并不会触发点击事件。
现在，我们使用Jquery的on()方法，下面例子中，点击按钮，可以正常触发点击事件。
1<!DOCTYPE html>
2<html>
3<head>
4<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
5</script>
6<script>
7$(document).ready(function(){
8 $("#main").on("click",".testBtn",function(){
9 alert("按钮被点击了");
10 });
11 $("#main").append("<button class='testBtn'>按钮</button");
12});
13</script>
14</head>
15<body>
16 <div id="main"></div>
17</body>
18</html>
参考文档：http://www.runoob.com/jquery/event-on.html
以上是关于JQuery给动态添加的元素绑定事件的主要内容，如果未能解决你的问题，请参考以下文章