记一次，关于重复绑定点击事件的问题（已解决）

最新推荐文章于 2025-09-29 16:43:42 发布

原创最新推荐文章于 2025-09-29 16:43:42 发布 · 667 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#回调函数 #callback #js #问题 #函数

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了一种在JavaScript中使用回调函数实现弹窗确认提交功能的方法，并解决了因多次调用导致DOM元素重复绑定点击事件的问题。

一次中，想自己写一个弹窗提示确认提交的功能，在这个功能中使用回调函数的方式去实现对应模块功能。代码如下：
js代码：

function myConfirm(title,content,callback){
            $(".con-box").show(50);
            $(".con-title p").text(title);
            $(".con-content p").text(content);
            $(".btn").on('click',function(){
                if($(this).attr('data-id') == 'yes'){
                    if(typeof(callback) == 'function'){
                        callback();
                    }
                }
                $(".con-box").hide(50);
                $(".con-title p").text('这里显示提示标题');
                $(".con-content p").text('这里显示提示信息');
            });
        }

html代码：

<div class="con-box">
        <div class="con-title">
            <p class="title-info">这里显示提示标题</p>
        </div>
        <div class="con-content">
            <p class="content-info">这里显示提示信息</p>
        </div>
        <div class="con-btn">
            <div class="btn-yes">
                <p class="yes-txt btn" data-id="yes">确认</p>
            </div>
            <div class="btn-no">
                <p class="no-txt btn" data-id="no">取消</p>
            </div>
        </div>
    </div>

css代码：

.con-box{
            position: fixed;
            top: 50%;
            left: 50%;
            width:auto;
            height:auto;
            transform:translate(-50%,-50%);
            background: #FFFFFF;
            border-radius:3px;
            box-shadow:1px 1px 3px;
            z-index:10;
            opacity:1;
            text-align:center;
            line-height:30px;
            display: none;
        }
        .con-box .con-title{
            padding:5px 3%;
            width:94%;
            display: table;
            border-bottom:1px solid #dddddd;
        }
        .con-box .con-content{
            padding:15px 25px;
            width:auto;
            border-bottom:1px solid #dddddd;
        }
        .con-box .con-btn{
            display: table;
            margin:0 auto;
            padding:5px 10px;
            width:90%;
        }
        .con-box .con-btn .btn-yes,.con-box .con-btn .btn-no{
            display: table;
            margin:5%;
            float: left;
            width:40%;
            height:30px;
            border-radius:3px;
            box-shadow:1px 1px 3px;
        }
        .con-box .con-btn .btn-no{
            background:#ff0000;
        }
        .con-box .con-btn .btn-yes{
            background:#007DDB;
        }
        .con-box p{
            display: table-cell;
            vertical-align: middle;
        }
        .con-box .con-btn p{
            color:#FFFFFF;
        }

然后在页面我写了两个按钮，一个是检测验证码是否正确（使用了ajax实现异步检测），另一个是弹出提示信息，但在执行过程中，发现了一个问题，就是当点击了其中一个按钮后，再点击另一个按钮时，系统竟然会执行上一次点击按钮的回调函数 : ( ，
页面如下：

当我点了验证后显示：
这里写图片描述

点击确认执行回调函数ajax验证，弹出提示结果：
这里写图片描述
这时当我又点击另一个按钮时，会发生执行了这一次回调函数后，会再执行上一次的回调函数：
本来这个按钮是这样提示的：

实际上提示这个后，会再次弹出：
这里写图片描述

后来发现，这是因为$(’.btn’)这个DOM元素在调用函数时，会重新绑定一次点击事件，多次调用，就变成绑定了多次点击事件，造成之后每一次点击，事实上是执行了多个点击绑定的函数，因此在绑定点击事件前，先解绑一下就可以了：


```javascript
$(".btn").unbind('click').on('click',function(){
                if($(this).attr('data-id') == 'yes'){
                    if(typeof(callback) == 'function'){
                        callback();
                    }
                }
                $(".con-box").hide(50);
                $(".con-title p").text('这里显示提示标题');
                $(".con-content p").text('这里显示提示信息');
            });