问题背景:在写一个非常简单添加方法的时候,用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. dijkstra与他的优化!!!

    目录 SPFA已死,有事烧纸 Dijkstra 配对堆 引言 讲解 合并 修改 弹出堆顶pop 代码 结合! 1 2 @ SPFA已死,有事烧纸 其实我本人也是一个SPFA的忠诚用户,至少我的最少费用 ...

  2. 策略模式—Java实现(转)

    1. 现实需求 客户有了新的需求,这时我们直接新增策略即可,改很少的代码.基本符合我们面向对象原则中的开闭原则(对扩展开放,对修改关系),实现了高内聚低耦合. 2. 策略模式定义 策略模式,又叫算法簇 ...

  3. 【转】Oracle AWR 报告 每天自动生成并发送邮箱 Python脚本(一)

    Oracle 的AWR 报告能很好的提供有关DB性能的信息. 所以DBA 需要定期的查看AWR的报告. 有关AWR报告的说明参考: Oracle AWR 介绍 http://blog.csdn.net ...

  4. Install ADDS on Windows Server 2012 R2 with PowerShell

    Install ADDS on Windows Server 2012 R2 with PowerShell Posted by ethernuno on 20/04/2014 In this tut ...

  5. 创建数据收集器集(DSC)

    TechNet 库 Windows Server Windows Server 2008 R2 und Windows Server 2008 按类别提供的 Windows Server 内容 按类别 ...

  6. sqlserver释放内存

    create procedure sp_clearmemasbegin dbcc freeproccache dbcc freesessioncache dbcc freesystemcache('a ...

  7. Linux 基础命令、文档树 和 bash

    最近发现了一个总结得更好的:bash cheatsheet 本文只是我对 linux 基础学习的一个总结,可能仅适用于复习用.算是我的 Linux 备忘录. 最基础 tab 补全 * 通配符 ctrl ...

  8. 小谈Bing桌面、Bing助手的现状与发展

    Teamwork中我的工作,既然写了就直接放上来吧. 一.Bing搜索的相关背景 第一,必应搜索前几年的发展重点在于欧美市场,并且取得了一定的成效:根据 Hitwise 的统计数据,Bing 在 20 ...

  9. Socket通信——服务器和客户端相互通信

    所谓socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄.应用程序通常通过"套接字"向网络发出请求或者应答网络请求.  Socket和S ...

  10. 笔记 docker入门笔记

    安装sudo apt-get remove docker docker-engine docker-ce docker.iosudo apt-get updatesudo apt-get instal ...