jQuery中 delegate使用的问题

习惯了bind，用惯了live，就不习惯delegate了呀有木有...

支持为动态生成的标签元素绑定事件也许就live和delegate了吧，不过新版本已经不支持live了，只有delegate

delegate真的比较特殊呀，不同于其他事件绑定的风格。

就因为习惯了之前的bind风格..栽了跟头

简单的说就是大意了。

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

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

语法

$(selector).delegate(childSelector,event,data,function)
参数 描述
childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
event
必需。规定附加到元素的一个或多个事件。

由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。

比如这段小代码啊

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("div").delegate("button","click",function(){
  $("p").slideToggle();
 });
});
</script>
</head>
<body>
<div style="background-color:red">
<p>这是一个段落。</p>
<button>请点击这里</button>
</div>

</body>
</html>

我老写成了

$(document).ready(function(){
 $("div").delegate($("button"),"click",function(){
  $("p").slideToggle();
 });
});

子选择器不需要选择起来了..

不然就像我那样出现不知名的错误（点击会触发click,但点击其他元素也会触发click...)

以上所述就是本文的全部内容了，希望大家能够喜欢。

赞 (0)

相关推荐

  • 由点击页面其它地方隐藏div所想到的jQuery的delegate

    由点击页面其它地方隐藏div所想到的jQuery的delegate

    先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: 复制代码 代码如下: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> </div> 对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML

  • jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()、.live()和.delegate()之间区别分析

    DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行. click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素

  • jQuery事件 delegate()使用方法介绍

    delegate定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素). 参数 描述 childSelector 必需.规定要附加事件处理程序的一个或多个子元素. event 必需.规定附加到元素的一个或多个事件. 由空格分隔多个事件值.必须是有效的事件. data 可选.规定传递到函数的额外数据. function 必

  • jQuery中delegate与on的用法与区别示例介绍

    在jQuery1.7中 .delegate()已被.on()取代.对于早期版本,它仍然使用事件委托的最有效手段. 在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的. .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 复制代码 代码如下: // jQuery 1.4.3+ $( elements ).delegate( selector, events, data, handler ); // jQ

  • jQuery中bind,live,delegate与one方法的用法及区别解析

    bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象. .bind(eventType[, evnetData], Handler(eventObject)) 其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,submit或自定义事件的名称,指定多个事件类型时用空格分隔各个类型:eventData为Map类型,给出要传递给事件处理程序的数据,handler指定触发该事件时要执行的函数,eventObject表示事

  • 浅谈jquery中delegate()与live()

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序 例如给id是showspan的div中的span标签添加事件 <div id="showspan"><span>showspan**showspan</span></div> <span>outspan</span> <SCRIPT LANGUAGE="JavaScript"> <!--

  • jQuery中delegate和on的用法与区别详细解析

    在jQuery1.7中 .delegate()已被.on()取代.对于早期版本,它仍然使用事件委托的最有效手段.在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的. .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 复制代码 代码如下: // jQuery 1.4.3+$( elements ).delegate( selector, events, data, handler );// jQuer

  • jQuery中delegate()方法用法实例

    本文实例讲述了jQuery中delegate()方法用法.分享给大家供大家参考.具体分析如下: 此方法为匹配元素的子元素添加一个或多个事件,并规定当这些事件发生时运行的函数. 语法结构: 复制代码 代码如下: $(selector).delegate(childofselector,type,data,function) 参数列表: 参数 描述 childofselector 定义要附加事件处理程序的一个或多个子元素. type 可选.定义附加到元素的一个或多个事件类型.由空格分隔多个事件值.

  • jQuery中 delegate使用的问题

    习惯了bind,用惯了live,就不习惯delegate了呀有木有... 支持为动态生成的标签元素绑定事件也许就live和delegate了吧,不过新版本已经不支持live了,只有delegate delegate真的比较特殊呀,不同于其他事件绑定的风格. 就因为习惯了之前的bind风格..栽了跟头 简单的说就是大意了. delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用

  • jQuery中delegate()方法的用法详解

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.下面我们具体来了解一下. 语法结构: 代码如下: $(selector).delegate(childofselector,type,data,function) 参数说明: childSelector 必需.规定要附加事件处理程序的一个或多个子元素. event 必需.规定附加到元素的一个或多个事件. 由空格分隔多个事件值.必须是有效的事件. data 可选.规定传递到函

  • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

    本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制

  • Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解

    简介 最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑.这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使用它们啊.下面本文将给大家详细介绍这四个方法之间的区别,分别对每个方法都进行了详细的介绍,话不多说,来一起看看详细的介绍: 在我们深入了解这些方法之前,我们先来一段常见的的HTML,作为我们编写jquery示例方法使用的样本. <ul id="members" data-role=&

  • jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除) live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除) delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除) on()------------------

随机推荐