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 面向对象(三)接口代码
May 23 Javascript
JavaScript实现为指定对象添加多个事件处理程序的方法
Apr 17 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
利用forever和pm2部署node.js项目过程
May 10 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
AngularJs 最新验证手机号码的实例,成功测试通过
Nov 26 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
vue拖拽组件 vuedraggable API options实现盒子之间相互拖拽排序
Jul 08 Javascript
微信小程序实现音频文件播放进度的实例代码
Mar 02 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
mysql数据库差异比较的PHP代码
2012/02/05 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
javascript eval函数深入认识
2009/02/21 Javascript
JSON传递bool类型数据的处理方式介绍
2013/09/18 Javascript
JavaScript+CSS控制打印格式示例介绍
2014/01/07 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
jquery $(&quot;#variable&quot;) 循环改变variable的值示例
2014/02/23 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
重写document.write实现无阻塞加载js广告(补充)
2014/12/12 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
JavaScript中document.referrer的用法详解
2017/07/04 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
Elasticsearch实现复合查询高亮结果功能
2019/09/10 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
JS实现打字游戏
2019/12/17 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python统计文本文件内单词数量的方法
2015/05/30 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
Django中login_required装饰器的深入介绍
2017/11/24 Python
python钉钉机器人运维脚本监控实例
2019/02/20 Python
用Python获取摄像头并实时控制人脸的实现示例
2019/07/11 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Python Map 函数的使用
2020/08/28 Python
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
2015/08/31 HTML / CSS
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
化学教师自荐信范文
2013/12/28 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
会计岗位职责
2015/02/03 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
springBoot基于webSocket实现扫码登录
2021/06/22 Java/Android
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python