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 相关文章推荐
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
Mar 20 Javascript
给jQuery方法添加回调函数一款插件的应用
Jan 21 Javascript
JS:window.onload的使用介绍
Nov 13 Javascript
鼠标滚轮改变图片大小的示例代码
Nov 20 Javascript
关于js中for in的缺陷浅析
Dec 02 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
Aug 15 Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 Javascript
JS创建对象几种不同方法详解
Mar 01 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
Vue导出json数据到Excel电子表格的示例
Dec 04 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
最令PHP初学者头痛的十四个问题
2006/07/12 PHP
第1次亲密接触PHP5(1)
2006/10/09 PHP
php简单生成随机数的方法
2015/07/30 PHP
php析构函数的简单使用说明
2015/08/24 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
js判断两个日期是否相等的方法
2013/09/10 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
nodejs实现获取某宝商品分类
2015/05/28 NodeJs
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法
2016/07/05 Javascript
jQuery事件用法详解
2016/10/06 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
2017/06/13 Javascript
详解在React中跨组件分发状态的三种方法
2018/08/09 Javascript
详解babel升级到7.X采坑总结
2019/05/12 Javascript
JS中的一些常用的函数式编程术语
2019/06/15 Javascript
JavaScript 格式化数字、金额、千分位、保留几位小数、舍入舍去
2019/07/23 Javascript
layui上传图片到服务器的非项目目录下的方法
2019/09/26 Javascript
JS访问对象两种方式区别解析
2020/08/29 Javascript
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python 类的特殊成员解析
2018/06/20 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python中class的定义及使用教程
2019/09/18 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
python实现飞机大战项目
2020/03/11 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
图库照片、免版税图片、矢量艺术、视频片段:Depositphotos
2019/08/02 全球购物
暑期培训心得体会
2014/09/02 职场文书
信访工作汇报材料
2014/10/27 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
后备干部推荐材料
2014/12/24 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
导游词之凤凰古城
2019/10/22 职场文书
解析redis hash应用场景和常用命令
2021/08/04 Redis
Python捕获、播放和保存摄像头视频并提高视频清晰度和对比度
2022/04/14 Python