Question

我为更新按钮点击编写了一个代码，它将显示一个带有2个按钮取消，删除的引导模式。我注意到点击update按钮后按钮的模态显示如果我按delete那个模态上的按钮然后奇怪地delete按钮调用它自己两次或更多而不是1.结果ajax也发射两次。我可能有任何事件类。这是示例代码。

    <button type="button"   id="update" class="btn btn-success" style="display:none;">Update</button>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal" id="cancel">Cancel</button>
    <button type="button"  class="btn btn-danger btn-ok" id="btn-delete">Delete</button>
</div>

$("#update").click(function (e) {
    e.preventDefault();
    $('#confirm-delete').modal("show");
}); 

$('#confirm-delete').on('show.bs.modal', function(e) {
     var instance = $(this);
     $("#btn-delete").click(function(event) {

         var data_x = 101;
         event.preventDefault();
         instance.modal('hide');
         $.ajax({
             url: 'delete_data.php',
             type: "post",
             async: true,
             data: ({
                 data_x: data_x
             }),
             success: function(data) {
                 alert(data);
             }
         });


     });

 });

请帮助我了解它＆amp;解决它。谢谢

Answer 1

每次打开模态时，您都会创建一个额外的单击功能。做一次：

$('#confirm-delete').one('show.bs.modal', function(e) {
// --------------------^
     $("#btn-delete").click(function(event) {

或者，使用事件委托并在模态回调之外（document.ready内的任何位置）执行：

$(document).on('click', '#confirm-delete', function() {
    // ...

为什么模态按钮多次调用？

1 个答案: