您的位置：首页 > Web前端 > JQuery

jquery学习 - 对动态创建的元素进行事件响应(bind, live, delegate)

2015-04-22 01:37 561 查看

事件响应

其实我们平时对网页上的元素进行响应，例如点击(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是处理的指定元素的子元素。

想学习两个函数的详细用法，可以点击上面两个超链接，查看。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 动态 bind live delegate jquery

相关文章推荐

新的分享

章节导航