Function javascript duplicating trigger by init method

Question

I have a function in my main menu that, when clicked, starts a 'classe' for the sector in question, everything goes well, however, I need to start the same class again when someone goes back to the sector, and in that, the methods have their duplicate call, follows 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 'Setor x' it increases the number of times the function 'open_collab_editor()' is called, this I want to stop and I’m not getting, I need to destroy the first initiation in order to start again, or another way to do this.

I cannot allow the event that is fired on 'open_collab_editor()' can be fired before clicking 'setor x';

Answer 1

You need to remove the function that is in the click on .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')
});

Answer 2

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

To solve this it will be necessary to use the .off, so you remove from the stack to then add. So removing the 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 exclusively remove it, pointing it at the .off, if I just do .off('click', elemente) will remove all calls, even from other functions.