Jquery on绑定的事件 触发多次

用‘on’函数为一个新增的按钮绑定了一个事件,这是事件会触发多次。

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>码上飘</title>
    <script src="/FrontStyle/js/jquery-1.11.2.min.js" type="text/javascript"></script>
    <script>
        $(function(){
            $(‘#btn1‘).click(function () {
                $(‘#btnBind‘).on(‘click‘,function () {
                    alert(123);
                });
            });
        })
    </script>
</head>
<body>
<input id="btn1" type="button"  value="确认" />
<input id="btnBind" type="button" value="绑定按钮" />
</body>
</html>

  

如上面的代码,如果你点击多次‘btn1‘按钮,那么就会绑定多少次click事件到‘btnBind‘按钮上,on是绑定多少次就触发多少次的。

解决方案:

1.要想它只绑定一次,可以先‘off‘解绑然后再‘on‘。

$(‘#btnBind‘).off(‘click‘).on(‘click‘,function () {
    alert(123);
});

 2.执行一次后解绑unbind()

 $(‘#btn1‘).click(function () {
         $(‘#btnBind‘).on(‘click‘,function () {
             alert(123);
         });         $("#btnBind").unbind("click")
 });

);

时间: 2024-09-27 10:37:19

Jquery on绑定的事件 触发多次的相关文章

jquery批量绑定click事件

jquery批量绑定click事件: var selects = $(".public_select dd ul li"); debugger; /*$(".public_select dd ul li a").each(function(){ /!*$(this).click(function(){ alert("aa"); })*!/ alert("cc"); $(this).bind("click",

夺命雷公狗jquery---21-bind为jquery对象绑定相关事件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery.js"></script> <script> //页面载入ready方法 $(function(){ //为按钮绑定单击事件 $('#btnok').bind('click',f

jquery 元素绑定on事件

在选择元素上绑定一个或多个事件的事件处理函数. on()方法绑定事件处理程序到当前选定的jQuery对象中的元素.在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能.帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off(). 参数 events,[selector],[data],fnV1.7 events:一个或多个用空格分隔的事件类型和可选的命名空间,如"click

jquery按钮绑定特殊事件

本文主要介绍点击一个按钮处理事件的一些特殊情况和技巧. 一.第一次点击触发一个函数,之后点击都触发另一个函数 1.小白实现 2.大神实现 代码如下: <body> <button>click me</button> <script> function bind(func1, func2) { let func = null return function() { (!func ? (func = func2, func1) : func).apply(thi

JQuery调用绑定click事件的3种写法

第一种方式: $(document).ready(function(){ $("#clickme").click(function(){ alert("Hello World click"); }); 第二种方式: $('#clickmebind').bind("click", function(){ alert("Hello World bind"); }); 第三种方式: $('#clickmeon').on('click

关于JS 事件冒泡和onclick,click,on()事件触发顺序

今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox. 查看JQgrid源码,发现它的click事件是绑定到了table上,然后判断事件点击目标,找到选中行给它勾选:而我的click事件是绑定到td里面的div中. 按照事件冒泡的触发顺序,应该是我的事件先触发,之后是JQgrid的事件. 结果不是这样的.我发现JQgrid使用$().click(fu

jQuery绑定以及解除时间方法总结,以及事件触发的方法

 一   off()和on()          $("obj").on(event,[sesect],[data],fn);一般情况下参数只有两个,事件以及事件的处理函数          off() 方法移除用.on()绑定的事件处理程序,如$("p").off("click","");   二  die()和live()        $("obj").live(type,[date],fn),$(&

关于jquery on方法进行事件绑定触发次数指数叠加的问题

发生环境: $modal.on('click', '#search',function(e){}); 上面代码的语法是这样的: .on( events [, selector ] [, data ], handler(eventObject) ) 其中$modal为父容器,在该容器上绑定click事件,当id为search的button被点击时才触发function 存在问题: 1. 点击第一次触发一次 2. 点击第二次触发两次 3. 点击第三次触发四次 ... 以此类推成指数增长 问题原因:o

jquery动态添加元素无法触发绑定的事件的解决方案

方法一:绑定live事件(live事件只在jquery1.9以下才支持,高版本不支持). //jquery 1.9(不包括1.9)以下可以 $(".btn").live("click",function(){ alert('这里是动态元素添加的事件'); }) 方法二:利用on()事件绑定 ($(ParentEle).on("click",".thisEle",function(){}) $("body")