jquery学习 - 对动态创建的元素进行事件响应(bind, live, delegate)
事件响应
其实我们平时对网页上的元素进行响应，例如点击(onclick)，更改(onchange)这些事件的时候，都比较简单。因为jquery都封装好了，直接$(‘elementID‘).click()就可以了。
动态添加元素
使用js控制页面的元素添加与删除是非常频繁的一个操作，很容易发现，假如我们的页面代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- jQuery文件。-->
<script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<script>
$(document).ready(function() {
$(‘#btnone‘).click(function() {
$(‘.row‘).append(‘<button id="btntwo">按钮2</button>‘);
});
$(‘#btntwo‘).click(function() {
alert("click me!");
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<button id="btnone">按钮1</button>
</div>
</div>
</body>
</html>可以很容易的看出来，页面上只有一个按钮1，当我们点击的时候会出现一个按钮2，其实我们已经写好了按钮2的点击事件，但是当我们不管怎么点击的时候，发现根本不会有任何变化。
这就是因为其实最开始页面上不存在的元素，jquery的click是没有绑定到元素的。
原因：
因为click或者change这些方法都是用bind来实现的。
对动态元素绑定
既然用bind不能实现，用什么可以实现呢？
- live()
- delegate()
这两个都可以实现。这两个方法都可以对未存在于DOM中的元素进行事件响应。所以上面的代码：
$(‘#btntwo‘).click(function() {
alert("click me!");
});要换成如下代码：
$(‘#btntwo‘).live(‘click‘, function() {
alert("click me!");
});或者换成如下代码：
$(document).delegate(‘#btntwo‘, ‘click‘, function() {
alert("click me!");
});就可以生效了。
live和delegate的不同
我通过看W3c live 页面和W3c delegate 页面对比后发现。
好像唯一不同的地方在于：
live
live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。delegate
delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。
就是delegate是处理的指定元素的子元素。
想学习两个函数的详细用法，可以点击上面两个超链接，查看。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
