一次中,想自己写一个弹窗提示确认提交的功能,在这个功能中使用回调函数的方式去实现对应模块功能。代码如下:
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('这里显示提示信息');
});