Function jQuery called by two distinct elements at once

Question

I have the following code:

<table>
[...]
<tr class=""> 
     <td class="col-md-2">
        10.1
     </td> 
     <td class="col-md-8"> 
        Teste 
     </td>  
     <td class="col-md-1"> 
        10 
     </td>  
     <td class="col-md-1">  
        <button type="button" class="btn btn-danger remover" data-toggle="modal" data-target="#confirma">  
            <span class="glyphicon glyphicon-trash"></span>  
        </button>  
     </td>  
</tr>
[...]
</table>

JS:

function removeEvento() {
    jQuery(".remover").click(function(e) {
        e.preventDefault();
        var linha = jQuery(this).parent().parent();
        jQuery("#confirma").modal("show");
        jQuery("#sim").click(function(e) {
            linha.remove();
            jQuery("#confirma").modal("hide");
        });
        return false;
    });
}
function insereEvento(formName, codInput, valoresArray, tabela, item, pontos) {
    tabela.append(linha);
    removeEvento();
    return true;
}

• It runs every time the delete line button is pressed.
• There is a button of this type for each row of a table.
• These lines are inserted by jQuery/Javascript, so I can’t reload the page.
• Problem: When I click the delete button, it opens a modal window, to delete the line, whether I click outside or not, the modal closes. The problem is that when I click to delete another record and delete it, the previous record is also deleted.

Thanks in advance.

Answer 1

The problem is that every time you click the "button. remove" you are creating an Handler to the "#yes" button with the current value of "line" (via closure). That way when the user clicks the "yes" button it will run all the handlers. Therefore, to fix this you can declare the variable "line" outside the scope of Handler and create the "#yes" button Handler only once:

function removeEvento() {
    var linha;
    var confirmaModal = jQuery("#confirma");

    jQuery(".remover").click(function(e) {
        e.preventDefault();
        linha = jQuery(this).parent().parent();
        confirmaModal.modal("show");
        return false;
    });

    jQuery("#sim").on("click", function(e) {
        linha.remove();
        confirmaModal.modal("hide");
    });
}

Answer 2

As you are using a table, do the following: change the row

var linha = jQuery(this).parent().parent();

and put that in place:

var linha = jQuery(this).closest('tr');

This operation is "cheaper" and faster.

And then your method removeEvento may be setting several actions on the same modal button since, for each time you open the modal, you are adding a new modal event click.

In the architecture you defined, you should clear the modal events before adding a new one. To clean use .off().

Your code should look something like this:

function removeEvento() {
    jQuery(".remover").click(function(e) {
        e.preventDefault();
        var linha = jQuery(this).closes('tr');
        jQuery("#confirma").modal("show");
        jQuery("#sim").off("click", "**").click(function(e) {
            linha.remove();
            jQuery("#confirma").modal("hide");
        });
        return false;
    });
}

Off documentation: http://api.jquery.com/off/

Documentation of the Closest: http://api.jquery.com/closest/