js中click重复执行
问题背景:在写一个非常简单添加方法的时候,用onclick事件调用添加方法,点击第一次没问题,第二次会重复执行,经过多次查找资料得知这个状况的解决方案,特意总结一下;
代码如下:点击#spec_form出现重复点击
function addSpec() {
var spec_form_format = jQuery("#spec_form_format");
spec_form_format.find(".noise-label01").text('实例'+addNum);
spec_form_format.find(".noise-label02").text('名称'+addNum);
spec_form_format.find(".noise-label03").text('价格'+addNum);
jQuery("#spec_form").append(spec_form_format.html());
addNum++;
$("#spec_form").click(function(){
alert('111')
});
}
//添加
$(".add").click(function(){
addSpec()
});
后来才发现问题是,我在页面中动态加载相同模块的时候,触发第二次添加加载的模块时,第一个模块的内容随之改变,这是因为第一个模块点击添加事件时并没有销毁而执行了两遍,所以只要改成如下:
只要选择在每次事件处理完成后销毁该事件,或者在下次事件触发前销毁之前的事件(每次绑定前先取消上次的绑定)
$("#spec_form").unbind('click').click(function(){ alert("111") });
还有另一种写法:
$("#spec_form").off("click").on("click",function(){ alert('111')});
但是.off()有一个不好之处,就是
会同时干掉所有相同类型的事件绑定,所以要谨慎使用
by name an
js中click重复执行的更多相关文章
- js中的延迟执行和定时执行
在js中,延迟执行函数有两种,setTimeout和setInterval,用法如下: function testFunction(){Console.log('hovertree.com');} s ...
- [转]js中confirm实现执行操作前弹出确认框的方法
原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...
- JS中的自执行函数
本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for ...
- JS中的立即执行函数
JS 立即执行函数可以让函数在创建后立即执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 1.立即执行函数的写法 立即执行函数通常有下面两种写法: //第一种写法 (func ...
- jq和js中click 事件的几种方式总结和click事件的累加问题解决办法
1:常见的三种绑定click事件: 第一种:$("#click").click(function(){ alert("Hello World click") ...
- JS中 (function(){...})()立即执行函数
(function(){...})() (function(){...}()) 这是两种js立即执行函数的常见写法. 基本概念: 函数声明:function fname(){...}; 使用funct ...
- js中的自执行匿名函数 (function(){})()
JS函数有两种命名方式 1.声明式 声明式会导致函数提升,function会被解释器优先编译.即我们用声明式写函数,可以在任何区域声明,不会影响我们调用. function XXX(){} 2.函数表 ...
- 【repost】js中(function(){…})()立即执行函数写法理解
摘要: javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ...
- js中(function(){…})()立即执行函数写法理解
文章摘自https://my.oschina.net/u/2331760/blog/468672?p={{currentPage+1}} 摘要: javascript和其他编程语言相比比较随意,所以j ...
随机推荐
- 简单聊聊四层/七层模型到HTTP
本文内容借鉴这篇博客:https://blog.csdn.net/agzhchren/article/details/79173491 但是这篇博客也是该博主转载的,文章具体出处我没有找到,如果有人知 ...
- mysql不能登陆
前些天还正常运行的mysql,不知怎么就不能登陆了.错误提示为 :ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (1 ...
- appcompat_v7\res\values-v21\themes_base.xml:158: error: Error: No resource
C:\DevelopSoft\workspace\appcompat_v7\res\values-v21\themes_base.xml:158: error: Error: No resource ...
- Django基于Pycharm开发之三[LANGUAGE_CODE与TIME_ZONE]
在django/conf/global_settings.py 中,我们可以找到关于language和timezone的通用配置信息,源码如下: # Local time zone for this ...
- loj2062 [HAOI2016]地图
ref #include <algorithm> #include <iostream> #include <cstdio> #include <cmath& ...
- 平衡树 - Luogu 1486 郁闷的出纳员
这么久没写平衡树了,再来一发... P1486 郁闷的出纳员 题目描述 OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的 ...
- 成都大学CTF 网络攻防演练平台 WP
web1 输入框那里鼠标右键,审查元素,删除maxlength web2 http://ctf.cdusec.org:8082/web2/?cdusec=tql web3 同上,用火狐hackbar或 ...
- JWT实现token认证
演变 1.1 有状态服务 在原来的单体系统中,有状态服务,即服务端需要记录每次会话的客户端信息,从而识别客户端身份,根据用户身份进行请求的处理,session+cookie.在如今的大多数分布式系统中 ...
- Python学习-day10(番外篇) 阻塞IO 非阻塞IO 同步IO 异步IO
这个章节的内容是关于IO的概念,谈一谈什么是 阻塞IO 非阻塞IO 同步IO 异步IO.以下摘要是我对这四种IO的一个形象理解. 场景是去去银行办理业务.节点有三个,1)到银行提交申请:2)取号:3) ...
- TopK-微博今日热门话题
大纲 TopK on single node TopK on multiple nodes Realtime topK with low QPS Realtime topK with high QPS ...