Jquery on方法绑定事件后执行多次的解决方法

这两天工作中遇到使用js动态加载内容，同时需要对加入的内容绑定点击事件的，当时想想了想可以使用内联的onclick 来实现，后来没有这样做，使用的是 on(‘click',function(){}) ,然而使用on方法的时候就发现，on 对同一个元素多次绑定同一个事件的时候，这个事件就会执行多次。

下面给出这种情况的实例：

$(function(){
  $(".add").click(function(eve){
   $(".btn-area").append("<button class='test-btn'>test button</button>");
   //$(".test-btn").off("click");
   $(".test-btn").on("click",function(){
    console.log("test button .....");
   });
  });
});

在点击add按钮的添加测试按钮，测试按钮绑定点击事件，console 台输出一句话。

执行结果如下：

很明显，第一个按钮点击之后执行了5次。

遇到这种情况需要在每次绑定事件之前，对该事件解绑，也就是 $(“.test-btn”).off(“click”); ，off方法解绑。

以上这篇Jquery on方法绑定事件后执行多次的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery事件多次绑定与解绑问题实例分析

    jQuery事件多次绑定与解绑问题实例分析

    本文实例分析了jQuery事件多次绑定与解绑问题.分享给大家供大家参考,具体如下: jQuery事件绑定很常见,相信大家经常会用到click.focus.blur等事件,但是如果对控件的某个事件绑定多个方法会是怎样的结果呢,覆盖.累加.或其他效果?今天我就来验证一下这个疑问并说说如何解绑. 一.jQuery事件多次绑定 <head> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">&l

  • jquery事件绑定解绑机制源码解析

    引子 为什么Jquery能实现不传回调函数也能解绑事件?如下: $("p").on("click",function(){ alert("The paragraph was clicked."); }); $("#box1").off("click"); 事件绑定解绑机制 调用on函数的时候,将生成一份事件数据,结构如下: { type: type, origType: origType, data: da

  • jQuery 通过事件委派一次绑定多种事件，以减少事件冗余

    于是乎,在日常的开发中大量使用连缀写法,而事件方法连缀就是一个特例.若给一个Dom对象使用了绑定了多个事件,便于阅读和书写,习惯了使用连缀写法,但这样的书写方式会造成时间的冗余. 1.事件冗余:多个事件方法中多次调用相同的代码 下面的代码是一个事件方法连缀的写法: 复制代码 代码如下: jQuery(function($) { $('<div id="livetip"></div>').hide().appendTo('body'); var tipTitle

  • 浅析jQuery事件之on()方法绑定多个选择器,多个事件

    $(document).on('click', '#header .top, #main .btn', function () { // code... }); on()方法绑定多个事件 $("table.planning_grid").on({ mouseenter: function() { // Handle mouseenter... }, mouseleave: function() { // Handle mouseleave... }, click: function()

  • jQuery绑定事件-多种实现方式总结

    jQuery绑定事件-多种实现方式总结 <html> <head> <meta charset="utf-8" /> <script src=https://pan.baidu.com/s/1o8GiuOq?qq-pf-to=pcqq.c2c></script> </head> <body> <input type="text"/> <input type=&quo

  • jQuery使用bind函数实现绑定多个事件的方法

    本文实例讲述了jQuery使用bind函数实现绑定多个事件的方法.分享给大家供大家参考,具体如下: 在jQuery中绑定多个事件名称是,使用空格隔开,举例如下: $("#foo").bind("mouseenter mouseleave", function() { $(this).toggleClass("entered"); }); 在1.4版本以后,也可以如下绑定 $("#foo").bind({ click: func

  • JQuery给元素绑定click事件多次执行的解决方法

    原绑定方法: 复制代码 代码如下: $("#sdfsd").on("mouseout",function(e){ ***** }); 这种方法只会在原click方法中继续添加新方法: 解决办法更改绑定方法为: 复制代码 代码如下: $("#sdfsd").unbind("click").click(function(e){ ***** }); 在绑定新click方法前对元素所绑定的click方法解绑

  • jQuery移除元素自动解绑事件实现思路及代码

    世界本该如此! 所以,在现代浏览器,如果你将一个元素从DOM树种进行移除的时候,浏览器会自动帮你绑定的事件进行解绑以释放其占用的内存.也许你猜到了,较老版本的浏览器则不会主动去做这件事,所以,当你的应用在较老版本的浏览器运行的越久,其消耗内存越多,应用就会变得越来越卡.因此,需要我们自己对要删除的元素进行事件解绑. 实现思路 用jQuery将元素移除的基本方法常用的有三个,一个是remove()方法,一个是html()方法,一个是empty()方法.我们可以对此三个方法进行进一步的封装,我们会在

  • 浅谈jQuery的bind和unbind事件(绑定和解绑事件)

    绑定其实就是把一些常规时间绑定到页面,然后进行各种常规操作 解绑就是接触绑定,绑定的事件失效 要注意,iQuery中的  .事件  如(.click())其实就是单个的绑定事件的简写(bind("click")) html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>02_事件绑定.html&

  • Jquery on方法绑定事件后执行多次的解决方法

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

  • Jquery on方法绑定事件后执行多次的实现方法

    Jquery on方法绑定事件后执行多次的实现方法

    这两天工作中遇到使用js动态加载内容,同时需要对加入的内容绑定点击事件的,当时想想了想可以使用内联的onclick 来实现,后来没有这样做,使用的是 on('click',function(){}) ,然而使用on方法的时候就发现,on 对同一个元素多次绑定同一个事件的时候,这个事件就会执行多次. 下面给出这种情况的实例: $(function(){ $(".add").click(function(eve){ $(".btn-area").append("

  • jQuery中on绑定事件后引发的事件冒泡问题如何解决

    用on绑定时,我把子元素的 绑定到 document,而把父元素绑定到上级元素,导致 return false 阻止冒泡无效. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

  • angularjs使用gulp-uglify压缩后执行报错的解决方法

    问题出现原因是由于压缩之后变量变成了,e.s.t等,需要依赖注入的方法没有使用中括号注入,而在function的参数中直接使用,导致压缩之后无法识别需要依赖注入的模块.例如: var module= angular.module('homeApp', ['ui.router']); module.config(function ($sceProvider) { $sceProvider.enabled(false); }) 改为: var module= angular.module('home

  • 关闭页面window.location事件未执行的原因及解决方法

    1.问题描述: JS中定义widow.location = function(),页面关闭时,logout()函数未执行. window.onunload = function() { logout(); } function logout(reqParam, callback){ var userManageServiceUrl = "http://" + getServerAddr() + "/axis2/services/UserManageService";

  • IE6浏览器下resize事件被执行了多次解决方法

    在IE浏览器下,一次resize事件被执行了多次.这是IE6和IE7的一个比较广为认知的问题,这个问题在这两个版本的浏览器中表现有所不同,通常IE6下会比IE7下更为糟糕. 现在已经有了一个较好的解决方案,让jquery.wresize.js这个jquery插件来帮你: Js代码 复制代码 代码如下: /* =============================================================================== WResize is the

  • vue中@click绑定事件点击不生效的解决

    目录 @click绑定事件点击不生效 原因 解决方法 @click中不能使用三则表达式原因 @click绑定事件点击不生效 原因 根据Vue2.0官方文档关于父子组件通讯的原则,父组件通过prop传递数据给子组件,子组件触发事件给父组件.但父组件想在子组件上监听自己的click的话,需要加上native修饰符. 解决方法 方法1:在@click后加上.native(监听根元素的原生事件,使用 .native 修饰符) @click.native = "..." 方法2:向外发送clic

  • jQuery防止重复绑定事件的解决方法

    本文实例分析了jQuery防止重复绑定事件的解决方法.分享给大家供大家参考,具体如下: 一.问题: 今天发现jQuery一个对象的事件可以重复绑定多次,当事件触发的时候会引起代码多遍执行. 下面是一个click事件被重复绑定的示例: function reg_button_click(){ $("#button).click(function(){ alert("button click"); }); } $(document).ready(function(){ #重复注册

  • 详谈jQuery unbind 删除绑定事件 / 移除标签方法

    jQuery unbind 删除绑定事件 unbind([type],[data]) 是 bind()的反向操作,从每一个匹配的元素中删除绑定的事件.如果没有参数,则删除所有绑定的事件.你可以将你用bind()注册的自定义事件取消绑定.如果提供了事件类型作为参数,则只删除该类型的绑定事件.如果把在绑定时传递的处理函数作为第二个参数,则只有这个特定的事件处理函数会被删除. 返回值: jQuery 参数: type (String) : (可选) 事件类型 data (Function): (可选)

  • vue绑定事件后获取绑定事件中的this方法

    使用$event传递参数(事件本身) <input v-model="checknames" @change="changecheckbox(item,$event)" style="float: right" type="checkbox" :value="index" > changecheckbox(val,element) { console.log( element.currentTa

随机推荐