Question

我下面使用的代码第一次工作正常。当我点击取消并再次按删除时，功能被调用两次。在下面的例子中我得到警报两次。我试过返回false，仍然是同样的问题。

以下是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>

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

Answer 1

只需将按钮的点击功能置于＆＃39;之外。 delbuttfultrackconfirm＆＃39;点击，像这样

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

$('#delfultrackconfirmdel').click(function (e) {
       alert("delete");
});

问题是你的代码是你每次打开模态而不是点击＆＃34;删除＆＃34;按钮，您在第一次点击按钮时添加了另一个处理程序。

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

Answer 2

这是因为每次点击后你都附加了事件处理程序。这是因为处理程序的元素存储数组，并且在两次单击后您有2个处理程序并且每个都将被调用。

function（e）{ 警报（＆＃34;删除＆＃34）; }

为避免这种情况，只需将处理程序移至顶部;

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

$('#delfultrackconfirmdel').click(function (e) {
       alert("delete");
});

Demo

Bootstrap3确认模态回调触发两次

2 个答案: