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 相关文章推荐
innerHTML,outerHTML,innerTEXT三者之间的区别
Jan 28 Javascript
javascript闭包的理解和实例
Aug 12 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
JS中如何实现Laravel的route函数详解
Feb 12 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
Mar 20 Javascript
Koa项目搭建过程详细记录
Apr 12 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
vue实现菜单切换功能
May 08 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
原生JS实现音乐播放器
Jan 26 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/07/12 PHP
推荐个功能齐全的发送PHP邮件类
2007/01/03 PHP
javascript操作文本框readOnly
2007/05/15 Javascript
JavaScript中继承的一些示例方法与属性参考
2010/08/07 Javascript
jquery一句话全选/取消全选
2011/03/01 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
JavaScript字符串对象toUpperCase方法入门实例(用于把字母转换为大写)
2014/10/17 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
2015/03/09 Javascript
JS Array.slice 截取数组的实现方法
2016/01/02 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
Jquery-data的三种用法
2017/04/18 jQuery
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
[01:03:41]DOTA2-DPC中国联赛 正赛 Dynasty vs XG BO3 第三场 2月2日
2021/03/11 DOTA
使用Python的PIL模块来进行图片对比
2016/02/18 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
解决Spyder中图片显示太小的问题
2018/04/27 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
pandas分批读取大数据集教程
2020/06/06 Python
python 三种方法实现对Excel表格的读写
2020/11/19 Python
python 爬取小说并下载的示例
2020/12/07 Python
给同学的道歉信
2014/01/16 职场文书
京剧自荐信
2014/01/26 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
股份合作协议书
2014/04/12 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
会计岗位职责
2015/02/03 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
2015年仓库工作总结
2015/04/09 职场文书
Python中else的三种使用场景
2021/06/16 Python