javascript - 带确认的 Jquery 模式在用户确认之前提交

Question

我让用户使用 jquery 和 ajax 删除功能。当用户单击删除时，会出现弹出窗口，并使用按钮是和否询问他是否确定。问题在于，在单击Delete 的瞬间执行了脚本并删除了用户。用户是否点击否也没关系。

我使用这个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);
            }
        });      
    });