Confirmation butao and only after ajax sends the request

Question

I am using jquerry-confirm before deleting a BD record. To delete the record I am using ajax. My problem is that when I click the delete button appears the confirmation message, and before I even click the confirm or cancel, the ajax runs and eliminates soon.

Jquerry confirm

                                                    <script type = "text/javascript" >
                                                $('.refuse').confirm({
                                                    content: "Confirma que quer eliminar?",
                                                    buttons: [{
                                                        text: "Enviar",
                                                        btnClass: 'btn-green',
                                                        action: function() {
                                                            location.href = this.$target.attr('href');
                                                        }
                                                    },
                                                    {
                                                        text: "Cancelar",
                                                        btnClass: 'btn-red',
                                                        action: function() {}
                                                    }

                                                    ]
                                                }); 
                                                </script>

Codigo Ajax

$("#pitchRefuse_<?=$i?>").on('click', (function(e) { 

                                                        var dadosajax = {
                                                            'campo1' : $(this).data("idpitch"),
                                                            'campo2' : $(this).data("status"),
                                                            'campo3' : $(this).data("nome"),
                                                            'campo4' : $(this).data("email"),
                                                            'campo5' : $(this).data("sobrenome"),
                                                        };

                                                        $.ajax({
                                                            type: "POST",
                                                            url: "ajax_modal.php",
                                                            data: dadosajax,
                                                            cache: false,
                                                            success: function(result){
                                                                console.log("entrou");  
                                                                $('.response').html(result);
                                                                $('.buttons').html('<div class="waiting disable" id="pitchWaiting"> Waiting </div> <div class="approve disable" id="pitchAprove"> Approve </div> <div class="refuse disable" id="pitchRefuse "> <span><i class="fa fa-fw fa-check"></i></span> Refuse </div>');
                                                            }
                                                        });

                                                    }));

Before I delete the registration I want the user to confirm the deletion, some idea of how I can do this?

Answer 1

See if it works:

//Seu botão, no HTML:
$('#btnEnviar').click(function() {
  $.confirm({
    title: 'Confirm!',
    content: 'Confirma a eliminação?',
    buttons: {
      confirm: function() {
      $.alert('Vai enviar a requisição');
        var dadosajax = {
          'campo1': $(this).data("idpitch"),
          'campo2': $(this).data("status"),
          'campo3': $(this).data("nome"),
          'campo4': $(this).data("email"),
          'campo5': $(this).data("sobrenome"),
        };

        $.ajax({
          type: "POST",
          url: "ajax_modal.php",
          data: dadosajax,
          cache: false,
          success: function(result) {
            console.log("entrou");
            $('.response').html(result);
            $('.buttons').html('<div class="waiting disable" id="pitchWaiting"> Waiting </div> <div class="approve disable" id="pitchAprove"> Approve </div> <div class="refuse disable" id="pitchRefuse "> <span><i class="fa fa-fw fa-check"></i></span> Refuse </div>');
          }
        });
      },
      cancel: function() {
        $.alert('Canceled!');
      }
    }
  });
});

<button id="btnEnviar">Enviar</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.2/jquery-confirm.min.js"></script>