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 相关文章推荐
理清apply(),call()的区别和关系
Aug 14 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
Dec 14 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
js中的onchange和onpropertychange (onchange无效的解决方法)
Mar 08 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
探索angularjs+requirejs全面实现按需加载的套路
Feb 26 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
vue环境搭建简单教程
Nov 07 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 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
收音机怀古---春雷3P7图片欣赏
2021/03/02 无线电
php+oracle 分页类
2006/10/09 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
javascript 动态添加表格行
2006/06/22 Javascript
javascript 动态数据下的锚点错位问题解决方法
2008/12/24 Javascript
js加入收藏以及使用Jquery更改透明度
2014/01/26 Javascript
网页实时显示服务器时间和javscript自运行时钟
2014/06/09 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
js匿名函数使用&amp;传参(实例)
2017/09/08 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
pyv8学习python和javascript变量进行交互
2013/12/04 Python
Python实现注册登录系统
2017/08/08 Python
python如何重载模块实例解析
2018/01/25 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
利用python画出AUC曲线的实例
2020/02/28 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
css3实现波纹特效、H5实现动态波浪效果
2018/01/31 HTML / CSS
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
中国跨境电商:Tomtop
2017/03/16 全球购物
艺术系大学生毕业个人自我评价
2013/09/19 职场文书
感恩小明星事迹材料
2014/05/23 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
网吧管理制度范本
2015/08/05 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
机关干部作风整顿心得体会
2016/01/22 职场文书
公司转让协议书
2016/03/19 职场文书
Win11远程连接不上怎么办?Win11远程桌面用不了的解决方法
2022/08/05 数码科技