JQuery中bind和unbind函数与onclick绑定事件区分
JQuery中bind和unbind函数转载: https://blog.csdn.net/liucheng417/article/details/51131982
页面代码:
<body>
<input type="button" name="aaa" value="点击我">
<input type="checkbox" name="checkbox1">
</body>
JQuery代码:
$().ready(function(){
for (var i = 0; i < 3; i++) {
$("input[type='button']").click(function(){
alert("aaaa");
});
}
}
执行结果：alert("aaaa")会执行三次。在事件嵌套事件中，不希望看到这样的情况，需要把上层事件禁用，此时可引入bind和unbind函数解决。
JQuery引入函数:
for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
//上面两句等价于$("input[type='button']").unbind("click").bind("click", function(){
alert("aaa");
});
}
执行结果：alert("aaa");仅执行一次。
与onclick区分
业务场景：
当需对某个按钮添加单击事件，为了控制重复点击，需点击完后立马去掉单击事件。
$(function(){
$('#btn').bind('click', aa);
});
function aa(){
$("#btn").unbind("click");
...
//在需要重新绑定点击事件时
$('#btn').bind('click', aa);
}
优点：基本兼容所有浏览器
做法2：
在button按钮上添加onclick事件。
点击onclick后调用aa()方法。
function aa(){
$("#btn").removeAttr("onclick");
...
//在需要重新绑定点击事件时
$("#btn).attr("onclick“,"aa()");
}
缺点：在IE7及以下不兼容。
JQuery中bind和unbind函数与onclick绑定事件区分的更多相关文章
- jQuery中如何给动态添加的元素绑定事件
jquery中绑定事件一般使用bind,或者click,但是这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定.在1.7版本以前使用live.但是在1.8版本以后推荐使用on.这 ...
- JQuery 的bind和unbind函数
测试:页面代码:<body> <input type="button" name="aaa" value="点击我" ...
- Jquery中bind(), live(), on(), delegate()四种注册事件的优缺点，建议使用on（）
jquery中注册的事件,注册事件很容易理解偏差,叫法不一样.我第一反应就是如何添加事件,使用onclick之类的,暂时不讨论js注册事件的方法. 也看到园内前辈写过相关的帖子,但不是很详细,我找到了 ...
- jQuery中bind方法和live方法区别解析
Javascript中的事件有它的独特性,有默认的执行事件,例如冒泡就是其中的一个.在很多比较复杂的应用程序中,停止事件的冒泡或捕获在程序开发当中是十分有用的,而在IE中有它的独特方式来阻止事件的冒泡 ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- jquery 中 html与text函数的区别
jquery 中 html与text函数的区别 共同点:它们都能讲函数中的参数渲染到页面中: 异同点: text() 只是简单的讲参数的内容写入到页面中: html() 会根据参数的值,判断是否字体符 ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- jquery中动态新增的元素节点无法触发事件解决办法
在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法． 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...
- js进阶---12-11、jquery如何给动态创建出来的元素绑定事件
js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...
随机推荐
- Ajax的兼容及Ajax的缓存问题
Ajax的兼容: 在ie 6 7 8 不支持XMLHttpRequest的对象: 他的Ajax内置对象为ActiveXObject("Microsoft XMLHTTP") 除了内 ...
- VC中function函数解析
C++标准库是日常应用中非常重要的库,我们会用到C++标准库的很多组件,C++标准库的作用,不单单是一种可以很方便使用的组件,也是我们学习很多实现技巧的重要宝库.我一直对C++很多组件的实现拥有比较强 ...
- 在CentOS-6.9里安装openvswitch-2.5.4
第一步:安装依赖 yum install rpm-build openssl-devel gcc wgetyum install python-devel kernel-devel kernel-de ...
- vmware导出为ovf
鼠标单击要导出的虚拟机à文件-à导出为OVFà开始导出(耗时有点长) 导出过程 导出的文件格式为: 出现此报错请点击重试 虚拟就就导入了 导入后就可以使用了 vmware1 ...
- USB-IF协会公布最新PD3.0（PPS）协议认证芯片和产品名单
原文: http://www.chongdiantou.com/wp/archives/25510.html 2017年的骁龙技术峰会高通带来了第一款兼容USB PD3.0(PPS)的QC4+充电器, ...
- python：数据类型set
一.集合 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变数据类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了 ...
- [UE4]使用C++重写蓝图，SpawnObject根据类型动态创建UObject
先大量使用蓝图制作项目,后续再用C++把复杂的蓝图重写一遍,用C++代码按照蓝图依葫芦画瓢就可以了,很简单,但需要遵守一些原则: 第一种方法:使用继承 一.创建一个C++类作为蓝图的父类(C++类继承 ...
- (转)驱动程序安装类(C#)
原文地址:http://www.cnblogs.com/BoyXiao/archive/2011/03/31/2001535.html 回忆刚进公司那会儿,手头的第一个工作就是完成虚拟键盘,也就是通过 ...
- RecyclerView实现ViewPager效果；
看代码就好了,RecyclerView实现Viewpager的效果,添加了界面的改变监听,用法和普通的RecyclerView一样,还可以设置一次滑动多个界面: public class VpRecy ...
- C#的两种类据类型：值类型和引用类型
注:引用类型相等赋值是地址赋值,不是值赋值. 什么是值类型,什么是引用类型 概念:值类型直接存储其值,而引用类型存储对其值的引用.部署:托管堆上部署了所有引用类型. 引用类型:基类为Objcet 值类 ...