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 相关文章推荐
jQuery 锚点跳转滚动条平滑滚动一句话代码
Apr 30 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
强大的jquery插件jqeuryUI做网页对话框效果!简单
Apr 14 Javascript
js 与 php 通过json数据进行通讯示例
Mar 26 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
Knockout结合Bootstrap创建动态UI实现产品列表管理
Sep 14 Javascript
jQuery post数据至ashx实例详解
Nov 18 Javascript
javascript基于原型链的继承及call和apply函数用法分析
Dec 15 Javascript
JS实现标签页切换效果
May 04 Javascript
vuejs父子组件之间数据交互详解
Aug 09 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 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
SONY ICF-SW55的电路分析
2021/03/02 无线电
php 搜索框提示(自动完成)实例代码
2012/02/05 PHP
win7+apache+php+mysql环境配置操作详解
2013/06/10 PHP
PHP Session机制简介及用法
2014/08/19 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP对象链式操作实现原理分析
2016/10/09 PHP
浅谈PHP匿名函数和闭包
2019/03/08 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
2013/04/10 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
Jquery创建层显示标题和内容且随鼠标移动而移动
2014/01/26 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
js 弹出虚拟键盘修改密码的简单实例
2016/10/10 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
Bootstrap 3 进度条的实现
2017/02/22 Javascript
underscore之Chaining_动力节点Java学院整理
2017/07/10 Javascript
JavaScript程序设计高级算法之动态规划实例分析
2017/11/24 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
Vue看了就会的8个小技巧
2021/01/21 Vue.js
Vue ​v-model相关知识总结
2021/01/28 Vue.js
Python简单遍历字典及删除元素的方法
2016/09/18 Python
通过css3动画和opacity透明度实现呼吸灯效果
2019/08/09 HTML / CSS
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
销售找工作求职信
2013/12/20 职场文书
批评与自我批评材料
2014/02/15 职场文书
物流管理专业求职信
2014/05/29 职场文书
小学运动会班级口号
2014/06/09 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
2014机关干部学习“焦裕禄精神”思想汇报
2014/09/19 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
同学会邀请函模板
2015/01/30 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
Python 处理表格进行成绩排序的操作代码
2021/07/26 Python
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL