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仿php的print_r函数输出json数据
Sep 13 Javascript
js解决弹窗问题实现班级跳转DIV示例
Jan 06 Javascript
javascript实现的闭包简单实例
Jul 17 Javascript
JavaScript中匿名函数的用法及优缺点详解
Jun 01 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
详解用webpack2.0构建vue2.0超详细精简版
Apr 05 Javascript
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
Jquery使用each函数实现遍历及数组处理
Jul 14 jQuery
vue 插槽简介及使用示例
Nov 19 Vue.js
在JavaScript中查找字符串中最长单词的三种方法(推荐)
Jan 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
如何使用PHP获取网络上文件
2006/10/09 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
javascript 学习之旅 (3)
2009/02/05 Javascript
js内置对象 学习笔记
2011/08/01 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
2017/04/21 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
koa2+vue实现登陆及登录状态判断
2019/08/15 Javascript
在Vue mounted方法中使用data变量详解
2019/11/05 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
Vue中引入svg图标的两种方式
2021/01/14 Vue.js
python目录操作之python遍历文件夹后将结果存储为xml
2014/01/27 Python
python通过索引遍历列表的方法
2015/05/04 Python
Python Socket使用实例
2017/12/18 Python
Python多进程原理与用法分析
2018/08/21 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
python子线程退出及线程退出控制的代码
2019/10/16 Python
python属于解释语言吗
2020/06/11 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
Python创建文件夹与文件的快捷方法
2020/12/08 Python
HTML5标签大全
2016/11/23 HTML / CSS
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
华为智利官方商店:Huawei Chile
2020/05/09 全球购物
三八活动策划方案
2014/08/17 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
学校联谊协议书
2014/09/16 职场文书
深入理解java.lang.String类的不可变性
2021/06/27 Java/Android
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL