4

Tenho uma função no meu menu principal que, quando clicada, inicia um 'classe' para o setor em questão, tudo ocorre bem, porém, eu preciso iniciar a mesma classe novamente quando alguém volta para o setor, e nisso, os métodos tem sua chamada duplicada, segue exemplo:

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>

Veja que cada vez que clico em 'Setor x' ele aumenta o numero de vezes que a função 'open_collab_editor()' é chamada, isso que eu quero impedir e não estou conseguindo, preciso destruir a primeira iniciação pra poder iniciar de novo, ou outra forma de fazer isso.

Não posso permitir que o evento que é disparado em 'open_collab_editor()' possa ser disparado antes de clicar em 'setor x';

2 Respostas 2

4

Você precisa remover a função que está no clique em .edit-collaborator:

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

Deveria ser:

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

O problema é que a acada chamada da função "iniciado" você esta adicionando na lista de eventos do elemento ".edit-collaborator" uma nova chamada.
Pense em um array com a lista de todas as chamadas para este elemento, basicamente você esta sempre adicionando. e não sobrescrevendo.

Para resolver isso sera necessário usar o .off, assim você remove da pilha para então adicionar. Assim removendo a duplicidade.

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>

Nota

Aqui eu decidi nomear a função de dentro para remover exclusivamente ela, apontando ele no .off, se eu fizer simplesmente .off('click', elemente) vai remover todas as chamadas, mesmo de outras funções.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .