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')
});