zoukankan      html  css  js  c++  java
  • 解决jquey中当事件嵌套时,内层事件会执行多次的问题

    出现情景:当内层事件需要外层事件触发后产生的一些值得时候

    情景复现:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>测试</title>
    </head>
    <body>
        <button id="btn1">
        外层事件
        </button>
        <button id="btn2">
        内层事件
        </button>
    </body>
    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
    <script>
        var count1=0;//记录外层事件执行次数
    var count2=0;//记录内层事件执行总次
    $('#btn1').on('click',function () {
        count1++;
        var testStr='外层中的字符串';
        console.log(''+count1+'次外层事件')
    
        $('#btn2').on('click',function () {
            count2++;
            console.log(testStr);
            console.log(''+count2+'次内层事件');
        })
    
    })
    </script>
    </html>

    页面效果 

    控制台内容:

    可以看到每执行一次外层事件:

    再次执行内层事件时,次数会一直累加

    解决办法:

    在内层事件绑定之前 利用$(selector).unbind(event) 方法先解绑一次:

    更改的js代码如下:

    <script>
        var count1=0;//记录外层事件执行次数
    var count2=0;//记录内层事件执行总次
    $('#btn1').on('click',function () {
        count1++;
        var testStr='外层中的字符串';
        console.log('第'+count1+'次外层事件')
    
        $('#btn2').unbind('click');//新增 解除绑定的click事件
        $('#btn2').on('click',function () {
            count2++;
            console.log(testStr);
            console.log('第'+count2+'次内层事件');
        })
    
    })
    </script>

    再次进行测试:

     解决内层事件多次被触发的问题

  • 相关阅读:
    兼容ie6的ul水平居中对齐
    button小手设置 css的cursor
    virtualbox xp连不上网
    转发与重定向的区别(forward与redirect的区别)
    注册表单输入框检测
    html中块元素的居中。及兼容性
    centos下不重装php——给PHP添加新扩展库
    linux编译安装时常见错误解决办法
    Swift可选链
    jQueryMobile(一)
  • 原文地址:https://www.cnblogs.com/roseAT/p/10355754.html
Copyright © 2011-2022 走看看