jQuery中 delegate使用的问题


Posted in Javascript onJuly 03, 2015

习惯了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...)

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

Javascript 相关文章推荐
JavaScript实现动态增加文件域表单
Feb 12 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
Node.js的特点和应用场景介绍
Nov 04 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 jQuery
基于Vue实现timepicker
Apr 25 Javascript
js原生代码实现轮播图的实例讲解
Jul 28 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
微信小程序实现多图上传
Jun 19 Javascript
JavaScript实现select添加option
Jul 03 #Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 #Javascript
Javascript中的作用域和上下文深入理解
Jul 03 #Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 #Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 #Javascript
一张Web前端的思维导图分享
Jul 03 #Javascript
JavaScript中的对象与JSON
Jul 03 #Javascript
You might like
新闻分类录入、显示系统
2006/10/09 PHP
php下intval()和(int)转换使用与区别
2008/07/18 PHP
洪恩在线成语词典小偷程序php版
2012/04/20 PHP
php中如何判断一个网页请求是ajax请求还是普通请求
2013/08/10 PHP
php加密解密实用类分享
2014/01/07 PHP
推荐5款跨平台的PHP编辑器
2014/12/25 PHP
php类的自动加载操作实例详解
2016/09/28 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
js播放wav文件(源码)
2013/04/22 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色
2015/11/26 Javascript
理解JS绑定事件
2016/01/19 Javascript
javascript数组去重常用方法实例分析
2017/04/11 Javascript
js获取浏览器的各种属性
2017/04/27 Javascript
微信小程序 开发MAP(地图)实例详解
2017/06/27 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
python根据距离和时长计算配速示例
2014/02/16 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
python实现超市扫码仪计费
2018/05/30 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
Python生成器常见问题及解决方案
2020/03/21 Python
Python如何脚本过滤文件中的注释
2020/05/27 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
介绍一下Linux中的链接
2016/05/28 面试题
房产销售经理职责
2013/12/20 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
2015年度优秀员工推荐信
2015/03/23 职场文书
2015年读书月活动总结
2015/03/26 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers