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 脚本将当地时间转换成其它时区
Mar 19 Javascript
jQuery代码优化之基本事件
Nov 01 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
Sep 06 Javascript
jquery让指定的元素闪烁显示的方法
Mar 17 Javascript
详解AngularJS中的作用域
Jun 17 Javascript
json格式的javascript对象用法分析
Jul 04 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
Jun 16 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
Sep 28 Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
图解JS原型和原型链实现原理
Sep 15 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
一个查看session内容的函数
2006/10/09 PHP
php你的验证码安全码?
2007/01/02 PHP
php简单浏览目录内容的实现代码
2013/06/07 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
WordPress中&quot;无法将上传的文件移动至&quot;错误的解决方法
2015/07/01 PHP
详解关于php的xdebug配置(编辑器vscode)
2019/01/29 PHP
JavaScript Cookie 直接浏览网站分网址
2009/12/08 Javascript
javascript call方法使用说明
2010/01/11 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
Vue2.0仿饿了么webapp单页面应用详细步骤
2018/07/08 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
JS操作JSON常用方法(10w阅读)
2020/12/06 Javascript
[34:39]Secret vs VG 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
[43:24]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.12
2020/12/17 DOTA
python中pygame模块用法实例
2014/10/09 Python
简介Python中用于处理字符串的center()方法
2015/05/18 Python
Python3指定路径寻找符合匹配模式文件
2015/05/22 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
在Python中COM口的调用方法
2019/07/03 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python实现大量图片重命名
2020/03/23 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
英国最大的专业户外零售商:Mountain Warehouse
2018/06/06 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
英国折扣高尔夫商店:Discount Golf Store
2019/11/19 全球购物
大学活动邀请函
2014/01/28 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
个人整改方案范文
2014/10/25 职场文书
mysql查询结果实现多列拼接查询
2022/04/03 MySQL