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

来源：互联网发布：sony xperia xz1 知乎编辑：程序博客网时间：2024/05/23 13:16

事件响应

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

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

1 0