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方式带额外参数时,字符串参数和其它 ...
随机推荐
- Spring @Async使用方法总结
引言: 在Java应用中,绝大多数情况下都是通过同步的方式来实现交互处理的:但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在spring 3. ...
- jquery插件的几种写法
/** * Created by peng on 2016/12/8. */jQuery.extend({ min: function(a, b) { return a < b ? a : b; ...
- [转]截图软件分享 - Snipaste
http://chromecj.com/software/2018-10/1538.html https://zh.snipaste.com/download.html
- 廖雪峰Java2面向对象编程-5包和classpath-4classpath和jar
1.classpath 1.1classpath定义 classpath是一个环境变量 classpath指示JVM如何搜索class classpath设置的搜索路径与操作系统相关 * window ...
- Node.js 搭建HTTP服务器，提供文件下载
直接上代码,这是第一版,可以判断扩展名 var http = require('http'); var express = require('express'); var fs=require(&qu ...
- CentOS6系统防火墙开启、关闭、查看状态（转载）
原文:https://blog.csdn.net/aaron_80726/article/details/79027760 注意:要进入到~目录 也就是家目录下才能查看防火墙 进入家目录:cd ~ 关 ...
- sqlserver数据库设计完整性与约束
use StudentManageDB go --创建主键约束 if exists(select * from sysobjects where name='pk_StudentId') alter ...
- 由于ip改变重新配置CM集群
修改所有主机/etc/hosts 修改所有agent节点的/opt/cm-5.5.1/etc/cloudera-scm-agent/config.ini,中server的ip 主节点启动cm serv ...
- jdk环境变量及1.6官方下载地址
jdk1.6: http://www.oracle.com/technetwork/java/javasebusiness/downloads/java-archive-downloads-javas ...
- jmeter关联Websocket包支持
消息文本发送内容采用的是websocket方式进行消息握手的,一次使用到WEBSOCKET包支持 对于它的介绍和使用如下: 一.首先,我们需要准备Jmeter的WebSocket协议的支持插件:JMe ...