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 相关文章推荐
js有关元素内容操作小结
Dec 20 Javascript
JS实现日期加减的方法
Nov 29 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
JavaScript中setUTCFullYear()方法的使用简介
Jun 12 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
Vue的Flux框架之Vuex状态管理器
Jul 30 Javascript
实例教学如何写vue插件
Nov 30 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
详解Webpack loader 之 file-loader
Nov 07 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
2016/09/26 Javascript
jqGrid翻页时数据选中丢失问题的解决办法
2017/02/13 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
Python多线程编程(七):使用Condition实现复杂同步
2015/04/05 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
Linux 修改Python命令的方法示例
2018/12/03 Python
windows下python安装pip方法详解
2020/02/10 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
css3过渡_动力节点Java学院整理
2017/07/11 HTML / CSS
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
日本亚马逊官方网站:Amazon.co.jp
2020/04/14 全球购物
小学语文国培感言
2014/03/04 职场文书
教师对学生的评语
2014/04/28 职场文书
文明工地标语
2014/06/16 职场文书
领导干部作风整顿剖析材料
2014/10/11 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
幼儿园六一儿童节演讲稿
2015/03/19 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书