问题背景:在写一个非常简单添加方法的时候,用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. GNU中的关键字typeof

    如果你是 C++ 程序员,应该接触过 C++11 里的 decltype 操作符,它的作用是自动推导表达式的数据类型,以解决泛型编程中有些类型由模板参数决定而难以(甚至不可能)表示的问题.其实这个特性 ...

  2. 动态规划:HDU-2955-0-1背包问题:Robberies

    解题心得: 这题涉及概率问题,所以要运用概率的知识进行解答.题目要求不被抓到的概率,但是给出的是被抓到的概率,所要用1减去后得到答案.最好使用double类型,避免精度问题导致WA. 先算出可以抢劫的 ...

  3. Fibonacci again and again HDU - 1848

    任何一个大学生对菲波那契数列(Fibonacci numbers)应该都不会陌生,它是这样定义的: F(1)=1; F(2)=2; F(n)=F(n-1)+F(n-2)(n>=3); 所以,1, ...

  4. GIt-恢复进度

    继续暂存区未完成的实践 经过了前面的实践,现在DEMO版本库应该处于master分支上,看看是不是这样. $ cd /path/to/my/workspace/demo $ git status -s ...

  5. HDFS上传文件

    1.client端向namenode请求上传文件,查看文件是否存在,是否有权限往hdfs写入 2.如果文件不存在,权限OK就根据副本数N(例如2个),根据网络拓扑选择N个离client端最近的data ...

  6. daily algorithm 判断链表是否有环

    public static boolean isLoopLink(ListNode head) { if (head == null) { return false; } ListNode fast ...

  7. leetcode 【 Copy List with Random Pointer 】 python 实现

    题目: A linked list is given such that each node contains an additional random pointer which could poi ...

  8. Monkeyrunner 录制脚本&回放

    本文主要解释如何使用monkeyrunner来实现脚本的录制和回放 一:准备条件 在电脑端配置 Android SDK环境   java 环境 下载好 SDK后添加环境变量   E:\android- ...

  9. postgresql connection failure:SQLSTATE[08006] [7] could not connect to server: Permission denied Is the server running on host "127.0.0.1" and accepting TCP/IP connections on port 5432?

    PHP 程序无法连接到 CentOS 上的PostgreSQL,但是在 CentOS 服务器上却能正常运行 psql, 操作如下:多次重启 PG 数据库后发现 CGI 脚本无法连接数据库,但是可以使用 ...

  10. 前端应该掌握的CSS实现多列等高布局

    1.引言 我们在写页面的时候,有的时候会遇到多栏布局,每个栏目里面的内容有的时候可能不一样,这样就会导致每个栏目实际的高度也是不一样的,如果每个栏目有背景颜色的,就会导致每个栏目的底部是对不齐的,用户 ...