Bootstrap3确认模式回调触发两次

Bootstrap3 confirm modal callback triggered twice

本文关键字：两次 确认 模式 回调 Bootstrap3      更新时间：2024-04-21

我在下面使用的代码第一次运行良好。当我单击"取消"并再次按"删除"时，函数会调用两次。。在下面的例子中，我得到了两次警告。我试着返回错误，仍然有同样的问题。

下面是javascript代码

$(document).on("click",'.delbuttfultrackconfirm', function(e){

    $('#delfultrackconfirm')
        .modal({ backdrop: 'static', keyboard: false })
        .one('click', '#delfultrackconfirmdel', function (e) {
           alert("delete");
        });

});

你好，下面是html代码

<!-- Modal --> 
<div class="modal fade" id="delfultrackconfirm" role="dialog" aria-labelledby="delfultrackconfirmLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
         <div id="delfultrackconfirmbody" class="modal-body"> Are you sure want to delete this </div>
         <div class="modal-footer"> <button type="button" data-dismiss="modal" class="btn btn-primary" id="delfultrackconfirmdel">Delete</button> <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> </div>
      </div>
   </div>
</div>
<br><br><br>
<center><button class="delbuttfultrackconfirm" href="#">del</button></center>

这是bootplyhttp://www.bootply.com/1Ghug4eX7p

只需将按钮的点击功能放在'之外。delbuttfultrackconfirm点击，就像这个

$(".delbuttfultrackconfirm").click(function(e){
    $('#delfultrackconfirm').modal({ backdrop: 'static', keyboard: false });
});
$('#delfultrackconfirmdel').click(function (e) {
       alert("delete");
});

问题是你的代码是，每次你打开模态而没有点击"删除"按钮时，你都会添加另一个处理程序，在第一次点击按钮时执行。

阅读文档：http://api.jquery.com/one/

这是因为每次单击后都会附加事件处理程序。之所以会发生这种情况，是因为元素存储了处理程序数组，并且在两次单击后，您有两个处理程序，每个处理程序都将被调用。

函数（e）{警报（"删除"）；}

为了避免这种情况，只需将处理程序移到顶部即可；

$(".delbuttfultrackconfirm").click(function(e){
    $('#delfultrackconfirm').modal({ backdrop: 'static', keyboard: false });
});
$('#delfultrackconfirmdel').click(function (e) {
       alert("delete");
});

演示

相关文章：