jquery1.7以下版本的live和高版本中新添加的delegate()的区别与使用

最新推荐文章于 2022-12-25 13:12:53 发布

潮神

最新推荐文章于 2022-12-25 13:12:53 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery 文章标签： jquery delegate

本文链接：https://blog.youkuaiyun.com/qinchaoguang123456/article/details/24983885

jquery 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了jQuery中delegate方法的使用方式及注意事项，通过实例演示了如何为现有和未来的DOM元素添加事件处理程序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天查找jquery文档时发现一个live的事件委派的一个方法，他可以作用于之后添加进来的元素。这正好是我想要的，后来我把原来的直接使用的click事件改为live发现没有用。于是我查了一下我的jquery的版本，是1.4版本的。在网上啊下了一个1.11.0版本，再查看帮助文档时发现，live已经在新版本被删除了，用delegate代替了。下面来看看delegate的用法。

返回值:jQuery delegate(selector,[type],[data],fn)

概述

指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。

使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

参数

selector,[type],fnString,String,FunctionV1.4.2

selector:选择器字符串，用于过滤器触发事件的元素。

type:附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

fn:当事件发生时运行的函数

再看一下一个小例子

当点击鼠标时，隐藏或显示 p 元素：
HTML 代码:
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>
jQuery 代码:
$("div").delegate("button","click",function(){
  $("p").slideToggle();
});

我们发现，delegate有三个参数，第一个参数是很重要的，要实现作用于未来元素的功能有两个要求，拿上例来看。

1.$("div").delegate("button","click",function()其中$("div")一定是"button"的父节点。

2.$("div")这个节点一定要是固定的。

例如当我要将整个div的所有内容包括div通过javascript清空在加入一个新的div如下：

<div style="background-color:red">
<p>这是一个新加的段落。</p>
<button>请再次点击这里</button>
</div>

这样再次点击button是没有任何效果的，因为之前的$("div")已经不存在了。