javascript function duplicating firing by init method

Question

javascript function duplicating firing by init method

Navigation

#1 by (4 votes)
#2 by (3 votes)

4

I have a function in my main menu that, when clicked, starts a 'classe' for the sector in question, everything happens well, however, I need to start the same class again when someone returns to the sector, and in that, the methods have their duplicate call, follow example:

var Collaborators = function () {
    var open_collab_editor = function(){

    $(document).on('click', '.edit-collaborator', function (e) {
        e.preventDefault();
        console.log('fui chamado')
    });

    }
    return {
        init: function () {
            open_collab_editor();
        }
    };
}();


$(document).on('click', '.abrir', function (e) {
    console.log('inciado');
    Collaborators.init();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='abrir'>Setor x</button>

<button class='edit-collaborator'>Editar (Função iniciada pelo Setor x)</button>

See that every time I click on 'Setor x' it increases the number of times the 'open_collab_editor()' function is called, which I want to prevent and I'm not getting it, I need to destroy the first initiation in order to start again, or another way to do this.

I can not allow the event that fires at 'open_collab_editor()' to be triggered before clicking 'setor x' ;

javascript jquery

asked by anonymous 27.10.2017 / 14:29

2 answers

4

You need to remove the function that is on the click .edit-collaborator :

$(document).on('click', '.edit-collaborator', function (e) {
    e.preventDefault();
    console.log('fui chamado')
});

Should be:

$(document).off("click", ".edit-collaborator").on('click', '.edit-collaborator', function (e) {
    e.preventDefault();
    console.log('fui chamado')
});

27.10.2017 / 15:00

Meanings of data-value, data-title, date-... attributes in HTML How to update Github repository after having changed files locally in Git?

score 3 · Accepted Answer

The problem is that the acada called the "started" function you are adding in the event list of the ".edit-collaborator" element a new call. Think of an array with the list of all calls to this element, basically you're always adding. and not overwriting.

To resolve this you will need to use .off , so you remove it from the stack to add it. Thus removing duplicity.

var Collaborators = function () {

    function handler2(e){ // Aqui você nomeia a função para poder remover ela
        e.preventDefault();
        console.log('fui chamado')
    }

    var open_collab_editor = function(){
    
        // Remove o evento
        $(document).off('click', '.edit-collaborator', handler2);
        // Adiciona o evento
        $(document).on('click', '.edit-collaborator', handler2);
    }
    
    // Se você sempre vai fazer Collaborators.init() basta retornar direto a função e fazer Collaborators()
    return open_collab_editor;
}();

$(document).on('click', '.abrir', function(e){
    console.log('inciado');
    Collaborators();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class='abrir'>Setor x</button>

<button class='edit-collaborator'>Editar (Função iniciada pelo Setor x)</button>

Note

Here I decided to name the function from within to uniquely remove it, pointing it at .off , if I do simply .off('click', elemente) will remove all calls, even from other functions.