Problems with Modal Bootstrap and Deletion of Records

Question

I have a page with n records and, for each of them, there is their respective Delete button. By pressing it, a modal bootstrap is opened by asking whether or not to confirm the action. When confirming, an ajax function is triggered, erasing the record in question.

A problem appeared when I went to do the following test: I was clicking on the delete command of some records, but it did not confirm. In the sequence, I confirmed the deletion of one of them. With this, it was deleted the latter and all other previous that I had canceled the action. Follow my code below:

Delete button:

<a class="delete" id="<?php echo $codigo;?>">APAGAR</a>

Jquery:

$('a.delete').click(function()
    {
        var id = $(this).attr('id');
        var data = 'id=' + id ;

        $('#confirm-delete').modal('show'); 
        $("#confirm-delete").modal().find(".btn-ok").on("click", function(){
        $('#confirm-delete').modal('hide'); 

         $.ajax(
            {
                   type: "POST",
                   url: "<?php echo BASEURL;?>deletar.php",
                   data: data,
                   cache: false,

                   success: function()
                   {
                        $('#confirm-delete2').modal('show');
                         $("#confirm-delete2").modal().find(".confirmado").on("click", function(){
                         $('.botao-form').attr("disabled", true);                                
                         $('.botao-form').html("Aguarde...");
                            window.location.reload();                           
                         });
                   }
             });                

          });
    });

Delete page.php

$id  = (isset($_POST['id'])) ? anti_sql_injection($_POST['id']) : 0; ;   
if ((!preg_match("([0-9])", $id))) $id = 0;
$delete1 = mysqli_query($conexao, "DELETE FROM hoteis where hot_codigo='$id'"

Confirm-delete button:

<div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header bg-primary">
            SISTEMA
        </div>
        <div class="modal-body">
            Confirma a exclusão deste estabelecimento? Esta ação não poderá ser desfeita.
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-success" data-dismiss="modal">Cancelar</button>
            <a class="btn btn-danger btn-ok">Deletar</a>
        </div>
    </div>
</div>

Confirm-delete button 2:

<div class="modal fade" id="confirm-delete2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header bg-primary">
            SISTEMA
        </div>
        <div class="modal-body">
            Estabelecimento excluído com sucesso!
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-success confirmado" data-dismiss="modal">OK</button>
        </div>
    </div>
</div>

From what I understand, it is as if each modal that I cancel the action, remain hidden and from the moment I confirm the button of one of them, all the previous ones are fired.

What am I doing wrong? I should create a jquery function to handle the modals I call, but cancel the action (not confirming the deletion)?

Answer 1

You’re adding an action to the modal button every time you click the delete button. The modal button is always the same so you only need one Switch.

Answer 2

This happens, because despite "hiding" the modal, you are doing the bind of the delete event on the confirm button each time you click on a delete link, as the button remains on the DOM, the event also continues attached to it, so you should do it as follows:

$('a.delete').click(function()
{
    var id = $(this).attr('id');
    var data = 'id=' + id ;

    $('#confirm-delete').modal('show'); 
    $("#confirm-delete").modal().find(".btn-ok").unbind('click');
    $("#confirm-delete").modal().find(".btn-ok").on("click", function(){
    $('#confirm-delete').modal('hide'); 

     $.ajax(
        {
               type: "POST",
               url: "<?php echo BASEURL;?>deletar.php",
               data: data,
               cache: false,

               success: function()
               {
                    $('#confirm-delete2').modal('show');
                     $("#confirm-delete2").modal().find(".confirmado").on("click", function(){
                     $('.botao-form').attr("disabled", true);                                
                     $('.botao-form').html("Aguarde...");
                        window.location.reload();                           
                     });
               }
         });                

      });
});

In case I just added the following line:

$("#confirm-delete").modal().find(".btn-ok").unbind('click');