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方法绑定事件后执行多次的解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。本文给大家介绍ztree获取选中节点时不能进入可视区域出现BUG如何解决的相关资料，对ztree获取选中节点感兴趣的朋友一起学习吧2015-12-12
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
对于 Boxy弹出框的使用之前写过一些文章（查看jquery.boxy基础），今天主要是在解决一个需要之后，觉得值得把它记录下来，所以就再写一篇，主要功能是，在弹出对话框后，隔N秒后自动隐藏，还有就是自动跳转2013-01-01
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
这篇文章主要介绍了jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果,具有穿越iframe的功能,涉及jQuery的EasyUI插件属性操作相关技巧,需要的朋友可以参考下2016-08-08
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
在项目中遇到这样的需求当用户点击编辑时，在点击行下动态产生一行，编辑铵钮变为disabled,新产生的一行有更新和取消的铵钮，点击“取消”铵钮，删除刚刚动态产生的行，编辑铵钮状态恢复。下面小编给大家分享实例代码，一起看看吧2017-03-03
jQuery实现右下角自动弹出可关闭的悬浮提示层特效。这种效果可以使用jQuery弹出层实现。有需要的小伙伴可以参考下。2015-05-05
二十个超级酷和最实用的jQuery实例，对于使用和学习jquery的朋友是个不错的参考与学习资料。2010-04-04
这篇文章主要介绍了jQuery实现动态添加和删除input框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
jQuery中的replace字符串替换实现不同尺寸图片切换功能
这篇文章主要介绍了jQuery之replace字符串替换实现不同尺寸图片切换,使用jQuery的replace()方法可以很方便地实现不同尺寸图片的切换，需要的朋友可以参考下2023-06-06
这篇文章主要介绍了EasyUI中的dataGrid的行内编辑的实现代码，非常不错，具有参考借鉴价值,需要的朋友可以参考下2017-06-06
下面一个示例为大家详细介绍下使用jquery实现表格的隔行换色功能，感兴趣的朋友可以参考下2015-11-11
最新评论