jQuery bind（绑定事件）前别忘了unbind（移除事件）

最新推荐文章于 2022-05-17 19:29:45 发布

chelen_jak

最新推荐文章于 2022-05-17 19:29:45 发布

阅读量5.2k

点赞数

分类专栏： jQuery 实用基础知识

本文链接：https://blog.csdn.net/chelen_jak/article/details/78166195

版权

实用同时被 3 个专栏收录

738 篇文章 4 订阅

订阅专栏

基础知识

160 篇文章 0 订阅

订阅专栏

jQuery

87 篇文章 0 订阅

订阅专栏

效果图：

代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <meta charset="utf-8" />
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
</head>
<body>
    <button id="add-event-more">
        叠加绑定SayHello事件  
    </button>

    <button id="add-event-one">
        先移再绑定SayHello事件  
    </button>

    <button id="say-hello">
        Say Hello  
    </button>

    <script>
        $(document).ready(function () {
            var iCount = 0;

            function sayHello() {
                alert("Hello!");
            };

            // 每Click 1 次, 多响应事件1次 （叠加了）  
            $("#add-event-more").bind("click", function () {
                iCount = iCount + 1;
                $("#say-hello").html("Say Hello " + iCount + "次");

                $("#say-hello").bind("click", sayHello);           // 绑定事件（事件叠加了）  
            });

            // 永远只响应1次事  
            $("#add-event-one").bind("click", function () {
                $("#say-hello").html("Say Hello 1次");

                $("#say-hello").unbind("click").bind("click", sayHello);   //先移除事件(避免事件叠加)，再绑定事件     

            });
        });
    </script>
</body>
</html>