Javascript function duplicating firing 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 fine, 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, following 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 each time I click on 'Setor x' it increases the number of times that the 'open_collab_editor()' function is called, this is what I want to prevent and I'm not able to, I need to destroy the first initiation to be able to start again, or another way to do it.

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

Answer:

You need to remove the role 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')
});
Scroll to Top