Unnecessary exclusion

Question

I have a table filled with codes:

• 1
• 2
• 3

When I click the delete record 1 button, it asks a question: "Do you want to delete the record?" I click no. I do the same for 2

But on 3, I click "yes"

The problem happens that is deleting the three records.

follows my ajax

$(".btn-remove").on("click", function(e){
    e.preventDefault();
     var rota = $(this).attr("href");

     $('#modal-confirma').modal('show');
     $("#modal-confirma").modal().find(".confirmado").on("click", function(){

        alert(rota);
         $.ajax({
            url: rota,
            type: "POST",
            success: function(resp){
                window.location.href = base_url + resp;
            }
        });
     });
});

follows the html of the modal

 <div class="modal fade" id="modal-confirma">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Confirmação de Exclusão</h4>
          </div>
          <div class="modal-body">
            Confirma  exclusão do item?
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger pull-left confirmado"
             data-dismiss="modal">Sim</button>
             <button type="button" class="btn btn-primary pull-left" data-dismiss="modal" aria-label="Close">
              Não</button>
            <!--<button type="button" class="btn btn-primary">Save changes</button>-->
          </div>
        </div>
        <!-- /.modal-content -->
      </div>
      <!-- /.modal-dialog -->
    </div>
    <!-- /.modal -->

follows the table html with the records:

<table id="tabelacategoria" class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Nome</th>
                                    <th>Descrição</th>
                                    <th>Opções</th>
                                </tr>
                            </thead>
                            <tbody>

                                <?php if(!empty($categorias)): ?>
                                    <?php foreach($categorias as $categoria): ?>
                                <tr>
                                    <td><?php echo $categoria->id_categoria; ?></td>
                                    <td><?php echo $categoria->nome; ?></td>
                                    <td><?php echo $categoria->descricao; ?></td>
                                    <td>
                                        <div class="btn-group">
                                            <button type="button" class="btn btn-info btn-view" data-toggle="modal" data-target="#modal-default" value="<?php echo $categoria->id_categoria; ?>">
                                                <span class="fa fa-search"></span>
                                            </button>
                                            <a href="<?php base_url()?>categorias/edit/<?php echo $categoria->id_categoria?>" class="btn btn-warning"><span class="fa fa-pencil"></span></a>
                                            <a href="<?php base_url()?>categorias/delete/<?php echo $categoria->id_categoria ?>" class="btn btn-danger btn-remove"><span class="fa fa-remove"></span></a>
                                        </div>
                                    </td>
                                </tr>
                                     <?php endforeach; ?>
                                <?php endif; ?>

                            </tbody>
                        </table>

Answer 1

The problem is adding the function/event of click in the object of the modal .confirmado, in that line specifically:

$("#modal-confirma").modal().find(".confirmado").on("click", function(){

When you add multiple functions in an event of the same object all of them are dispatched:

$("#teste").on("click", function() {
    console.log("Click 1");
});

$("#teste").on("click", function() {
    console.log("Click 2");
});

$("#teste").click();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="teste" style="width: 50px; height: 50px; background-color: #FF0000;"></div>

You need to use the command unbind() jQuery to remove the previous functions before adding a new one:

$("#modal-confirma").modal().find(".confirmado").unbind();
$("#modal-confirma").modal().find(".confirmado").on("click", function(){