Jquery on方法绑定事件后执行多次的解决方法
更新时间：2016年06月02日 11:04:03 投稿：jingxian
下面小编就为大家带来一篇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方法绑定事件后执行多次的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了jQuery实现表单验证功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要为大家详细介绍了jQuery CSS3自定义美化Checkbox实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-05-05
对元素进行拖动排序的实现方法有很多，在本文为大家介绍下使用jquery来完成这个工作，希望对大家有所帮助2014-01-01
这篇文章主要介绍了jquery.qtip提示信息插件用法,结合简单实例形式分析了该插件用于显示提示信息的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2016-06-06
这篇文章主要给大家详细介绍了jQuery.each使用方法及源码分析的相关资料,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了jQuery中:lt选择器用法,实例分析了:lt选择器的功能、定义及匹配小于指定索引值元素的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路
这是一个简单的POST 请求功能以取代复杂 $.ajax,请求成功时可调用回调函数,感兴趣的朋友可以参考下哈，希望对你有所帮助2013-04-04
这篇文章主要介绍了jquery实现商品sku多属性选择功能（商品详情页）,文中简单给大家介绍了sku的概念，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了jQuery获取DOM节点的方法,提供了两种jQuery获取DOM节点的技巧,需要的朋友可以参考下2015-12-12
下面小编就为大家带来一篇详谈表单格式化插件jquery.serializeJSON。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
最新评论