问题背景:在写一个非常简单添加方法的时候,用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重复执行的更多相关文章

  1. js中的延迟执行和定时执行

    在js中,延迟执行函数有两种,setTimeout和setInterval,用法如下: function testFunction(){Console.log('hovertree.com');} s ...

  2. [转]js中confirm实现执行操作前弹出确认框的方法

    原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...

  3. JS中的自执行函数

    本来规划的是2013年,狠狠的将JS学习下,谁知计划赶不上变化,计划泡汤了.13年的我对JS来说可以说是属于跟风,对它的理解和认识也仅仅是皮毛而已,也是因为要完成<ArcGIS API for ...

  4. JS中的立即执行函数

    JS 立即执行函数可以让函数在创建后立即执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 1.立即执行函数的写法 立即执行函数通常有下面两种写法: //第一种写法 (func ...

  5. jq和js中click 事件的几种方式总结和click事件的累加问题解决办法

     1:常见的三种绑定click事件: 第一种:$("#click").click(function(){ alert("Hello World  click") ...

  6. JS中 (function(){...})()立即执行函数

    (function(){...})() (function(){...}()) 这是两种js立即执行函数的常见写法. 基本概念: 函数声明:function fname(){...}; 使用funct ...

  7. js中的自执行匿名函数 (function(){})()

    JS函数有两种命名方式 1.声明式 声明式会导致函数提升,function会被解释器优先编译.即我们用声明式写函数,可以在任何区域声明,不会影响我们调用. function XXX(){} 2.函数表 ...

  8. 【repost】js中(function(){…})()立即执行函数写法理解

    摘要: javascript和其他编程语言相比比较随意,所以javascript代码中充满各种奇葩的写法,有时雾里看花,当然,能理解各型各色的写法也是对javascript语言特性更进一步的深入理解. ...

  9. js中(function(){…})()立即执行函数写法理解

    文章摘自https://my.oschina.net/u/2331760/blog/468672?p={{currentPage+1}} 摘要: javascript和其他编程语言相比比较随意,所以j ...

随机推荐

  1. 简单聊聊四层/七层模型到HTTP

    本文内容借鉴这篇博客:https://blog.csdn.net/agzhchren/article/details/79173491 但是这篇博客也是该博主转载的,文章具体出处我没有找到,如果有人知 ...

  2. mysql不能登陆

    前些天还正常运行的mysql,不知怎么就不能登陆了.错误提示为 :ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (1 ...

  3. 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 ...

  4. Django基于Pycharm开发之三[LANGUAGE_CODE与TIME_ZONE]

    在django/conf/global_settings.py 中,我们可以找到关于language和timezone的通用配置信息,源码如下: # Local time zone for this ...

  5. loj2062 [HAOI2016]地图

    ref #include <algorithm> #include <iostream> #include <cstdio> #include <cmath& ...

  6. 平衡树 - Luogu 1486 郁闷的出纳员

    这么久没写平衡树了,再来一发... P1486 郁闷的出纳员 题目描述 OIER公司是一家大型专业化软件公司,有着数以万计的员工.作为一名出纳员,我的任务之一便是统计每位员工的工资.这本来是一份不错的 ...

  7. 成都大学CTF 网络攻防演练平台 WP

    web1 输入框那里鼠标右键,审查元素,删除maxlength web2 http://ctf.cdusec.org:8082/web2/?cdusec=tql web3 同上,用火狐hackbar或 ...

  8. JWT实现token认证

    演变 1.1 有状态服务 在原来的单体系统中,有状态服务,即服务端需要记录每次会话的客户端信息,从而识别客户端身份,根据用户身份进行请求的处理,session+cookie.在如今的大多数分布式系统中 ...

  9. Python学习-day10(番外篇) 阻塞IO 非阻塞IO 同步IO 异步IO

    这个章节的内容是关于IO的概念,谈一谈什么是 阻塞IO 非阻塞IO 同步IO 异步IO.以下摘要是我对这四种IO的一个形象理解. 场景是去去银行办理业务.节点有三个,1)到银行提交申请:2)取号:3) ...

  10. TopK-微博今日热门话题

    大纲 TopK on single node TopK on multiple nodes Realtime topK with low QPS Realtime topK with high QPS ...