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脚本实现Web页面信息交互
Dec 21 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
Apr 07 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
Vue Render函数原理及代码实例解析
Jul 30 Javascript
Vue自定义全局弹窗组件操作
Aug 11 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中通过curl smtp发送邮件
2012/06/05 PHP
php 获取xml接口数据的处理方法
2018/05/31 PHP
在IE模态窗口中自由查看HTML源码的方法
2007/03/08 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
2015/07/27 Javascript
jQuery的Ajax用户认证和注册技术实例教程(附demo源码)
2015/12/08 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
AngularJS使用拦截器实现的loading功能完整实例
2017/05/17 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
2017/07/12 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
超简单的微信小程序轮播图
2019/11/22 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
python判断字符串是否包含子字符串的方法
2015/03/24 Python
Python实现把json格式转换成文本或sql文件
2015/07/10 Python
Python使用设计模式中的责任链模式与迭代器模式的示例
2016/03/02 Python
详解python的几种标准输出重定向方式
2016/08/15 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
python 实现数组list 添加、修改、删除的方法
2018/04/04 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
pyqt5中QThread在使用时出现重复emit的实例
2019/06/21 Python
django restframework serializer 增加自定义字段操作
2020/07/15 Python
一文带你了解Python 四种常见基础爬虫方法介绍
2020/12/04 Python
THE OUTNET美国官网:国际设计师品牌折扣网站
2017/03/07 全球购物
Notino法国:购买香水和化妆品
2019/04/15 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
社会实践心得体会
2014/01/03 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
英语教师个人总结
2015/02/09 职场文书
大学感恩节活动总结
2015/05/05 职场文书
安全教育日主题班会
2015/08/13 职场文书