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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
理解Javascript_11_constructor实现原理
Oct 18 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
10 种最常见的 Javascript 错误(频率最高)
Feb 08 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
vue中post请求以a=a&amp;b=b 的格式写遇到的问题
Apr 27 Javascript
使用Phantomjs和Node完成网页的截屏快照的方法
Jul 16 Javascript
浅谈layui 数据表格前后台传值的问题
Sep 12 Javascript
JS图片预加载三种实现方法解析
May 08 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 Array交叉表实现代码
2010/08/05 PHP
PHP随机生成随机个数的字母组合示例
2014/01/14 PHP
PHP入门经历和学习过程分享
2014/04/11 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
浅谈PHP中foreach/in_array的使用
2015/11/02 PHP
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
ES6扩展运算符的用途实例详解
2017/08/20 Javascript
Vue表单类的父子组件数据传递示例
2018/05/03 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
Vue项目pdf(base64)转图片遇到的问题及解决方法
2018/10/19 Javascript
解决vue移动端适配问题
2018/12/12 Javascript
详解js根据百度地图提供经纬度计算两点距离
2019/05/13 Javascript
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
python实现图书管理系统
2018/03/12 Python
Python中pandas模块DataFrame创建方法示例
2018/06/20 Python
python 判断参数为Nonetype类型或空的实例
2018/10/30 Python
python爬虫基础教程:requests库(二)代码实例
2019/04/09 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
pip install 使用国内镜像的方法示例
2020/04/03 Python
Python接口自动化测试的实现
2020/08/28 Python
python3 os进行嵌套操作的实例讲解
2020/11/19 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
Sixt美国租车:高端豪华车型自驾体验
2017/09/02 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
2015元旦标语横幅
2014/12/09 职场文书
毕业论文致谢范文
2015/05/14 职场文书
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python
python多次执行绘制条形图
2022/04/20 Python