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 相关文章推荐
IE8 中使用加速器(Activities)
May 14 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
jQuery拖拽通过八个点改变div大小
Nov 29 Javascript
利用nginx + node在阿里云部署https的步骤详解
Dec 19 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 25 Javascript
JS实现数组去重的11种方法总结
Apr 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脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP接口继承及接口多继承原理与实现方法详解
2017/10/18 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
Js组件的一些写法
2010/09/10 Javascript
jQuery 1.5最新版本的改进细节分析
2011/01/19 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JS获取时间的方法
2015/01/21 Javascript
javascript顺序加载图片的方法
2015/07/18 Javascript
javascript实现动态统计图开发实例
2015/11/21 Javascript
javascript高级选择器querySelector和querySelectorAll全面解析
2016/04/07 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python获取指定网页上所有超链接的方法
2015/04/04 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
浅述python中argsort()函数的实例用法
2017/03/30 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
python实现烟花小程序
2019/01/30 Python
关于PyTorch 自动求导机制详解
2019/08/18 Python
Selenium之模拟登录铁路12306的示例代码
2020/07/31 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
捷克领先的户外服装及配件市场零售商:ALPINE PRO
2018/01/09 全球购物
几个MySql的面试题
2013/04/22 面试题
平面设计师工作职责范文
2013/12/03 职场文书
向女朋友道歉的话
2015/01/20 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python
java设计模式--七大原则详解
2021/07/21 Java/Android
一次线上mongo慢查询问题排查处理记录
2022/03/18 MongoDB