jQuery function called by two distinct elements at once

Question

jQuery function called by two distinct elements at once

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

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 in a table.
These lines are inserted by jQuery / JavaScript, so I can not reload the page.
Problem: When I click the delete button, it opens a modal window, to delete the line, if I click outside or not, the modal closes. The problem is that when I click to delete another record and erase it, the previous record is also deleted.

Thank you in advance.

javascript html jquery

asked by anonymous 03.03.2016 / 14:34

2 answers

1

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

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

and put this in place:

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

This operation is more "cheap" and faster.

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

In the architecture you defined, you should clear 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: link

Documentation of the closest: link

03.03.2016 / 15:30

Create search bar HTML: Anchor point - what is it?

score 2 · Accepted Answer

The problem is that every time you click the ".remover" button you are creating a handler for the "#sim" button with the current "line" value (via closure). That way when the user clicks the "yes" button will execute all the handlers. So to fix this you can declare the variable "line" out of the handler scope and create the button handler "#sim" 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");
    });
}