Jquery modal with confirmation is submited before user confirmation

Question

我有用戶使用jquery和ajax刪除函數。當用戶點擊Delete彈出窗口出現並詢問他是否確定按鈕Yes和No。問題是腳本在點擊Delete時被執行並且用戶被刪除。用戶點擊No並不重要。

我使用這個jQuery插件確認： https://myclabs.github.io/jquery.confirm/

這是jQuery的部分

$(document).ready(function() { 

    $('.delete').click(function() { 
     var parent = $(this).closest('.header-profile'); 
     $.ajax({ 
     type: 'get', 
     url: 'misc/friendRemove.php', 
     data: 'ajax=1&delete=' + $(this).attr('id'), 
     beforeSend: function() { 
      parent.animate({'backgroundColor':'#fb6c6c'},300); 
     }, 

      success: function() 
      { 
       parent.fadeOut('slow', function() {$(this).remove();}); 
      } 
     });     
    }); 

    $('.delete').confirm({ 
     text: "Are you sure?", 
     title: "Please confirm", 

     confirmButton: "Yes", 
     cancelButton: "No", 
     post: true, 
     confirmButtonClass: "btn-danger", 
     cancelButtonClass: "btn-default", 
     dialogClass: "modal-dialog modal-lg" 
    });  
}); 

而且按鈕

<a href="" class="delete" id="'.$row['id'].'"><i class="fa fa-times pull-right"></i></a> 

Answer 1

您必須調用方法confirm上的ajax刪除方法。以下是代碼：

function deleteItem(parent, id){ 
      $.ajax({ 
      type: 'get', 
      url: 'misc/friendRemove.php', 
      data: 'ajax=1&delete=' + id, 
      beforeSend: function() { 
       parent.animate({'backgroundColor':'#fb6c6c'},300); 
      }, 

      success: function() { 
       parent.fadeOut('slow', function({$(this).remove();}); 
      } 
      });   
     } 

    $(document).ready(function() { 
     var parent, id; 
     $('.delete').click(function(event) { 
      parent = $(this).closest('.header-profile'); 
      id = $(this).attr('id'); 
      event.preventDefault();   
     }); 


     $('.delete').confirm({ 
      text: "Are you sure?", 
      title: "Please confirm", 
      confirmButton: "Yes", 
      cancelButton: "No", 
      post: true, 
      confirmButtonClass: "btn-danger", 
      cancelButtonClass: "btn-default", 
      dialogClass: "modal-dialog modal-lg", 
      confirm: function(button) { 
      deleteItem(parent, id); 
      } 
     });  
    }); 

Answer 2

嘗試使用：

$(document).ready(function() { 

    $('.delete').click(function() { 

     $(this).confirm({ 
      text: "Are you sure?", 
      title: "Please confirm", 

      confirm: function() { 
       var parent = $(this).closest('.header-profile'); 
       $.ajax({ 
        type: 'get', 
        url: 'misc/friendRemove.php', 
        data: 'ajax=1&delete=' + $(this).attr('id'), 
        beforeSend: function() { 
         parent.animate({'backgroundColor':'#fb6c6c'},300); 
        }, 

        success: function() 
        { 
         parent.fadeOut('slow', function() {$(this).remove();}); 
        } 
       }); 
      }, 

      confirmButton: "Yes", 
      cancelButton: "No", 
      post: true, 
      confirmButtonClass: "btn-danger", 
      cancelButtonClass: "btn-default", 
      dialogClass: "modal-dialog modal-lg" 
     }); 

    }); 

}); 

也就是說，只有當從插件的文檔中收到確認時，纔會調用ajax進行用戶刪除：https://github.com/myclabs/jquery.confirm#options