How to destroy a jQuery.fn whenever called?

Asked

Viewed 314 times

4

I built a plugin using jQuery.fn.algumaCoisa = function(options, callback){};, But when I call several times on the same element, it multiplies the behavior instead of overlapping. Has some way of whenever calling this function it reset the effect on the element?

When calling on the same element it should reset the behavior, but the internal buttons are having multiplied effect, summarizing, are not missing the previously assigned effects.

$('div').algumaCoisa(); // usario clica em um botão e chama
$('div').algumaCoisa(); // usario clica em um botão e chama
$('div').algumaCoisa(); // usario clica em um botão e chama
jquery

  • it is somewhat complicated to answer this question, without knowing what has in this function something, because thinking a function that manipulates the dom of the element, with the "reset" would you know what was changed? it would be necessary to create a variable with if it was a change log.

  • 1

    Could Orion give more details? For the .fn. has the function of just going through the selected elements with a custom function, the problem seems to be in your Function, however Voce can maybe use an attribute in the elements to detect if they were already set. I’ll try to formulate a response.

3 answers

2


Your problem occurs because the events are set cumulatively, to solve this we will depend a little on the way you implemented. I will show two examples with event .click() and with .on() which are two event handlers of the jQuery available in versions 1.7 + .

With the use of .click():

jQuery.fn.algumaCoisa = function(){ 

    //ele remove todos os eventos de click antes de setar
    $(this).unbind('click');

    //seta seu evento
    $(this).click(function() {
        alert("teste1");
    });    
}

With the use of .on():

jQuery.fn.algumaCoisa = function(){ 

    //ele remove todos os eventos de click antes de setar
    $(this).unbind('click');

    //seta seu evento
    $(this).on('click', function() {
        alert("teste1");
    });    
}

Follows jsfiddle, If you are using any other way to set the event just speak in the comments!

  • 1

    The problem is that I thought that removing the function of the element would destroy all internal effects set by this function, I decided calling unbind() internal elements before setting again.

1

The function of jQuery.fn not and assign anything, it just pass the selected nodes to your custom method. Who defines whether will add repeatedly and Voce.

In case Voce can use the attr() to detect if Node has already received the attribute (if Voce is only going to use for nodes), I recommend that you also check if the selected item is really a Node, because the $(...) can receive window and Document also.

function isDOM(el) {
   return el && el instanceof HTMLElement;
}

jQuery.fn.foo = function() {
    this.each(function() {
       if (isDOM(this) && $(this).attr("data-foo") !== "true") {
           $(this).attr("data-foo", "true");

           //Algo aqui
       }
    });
};

This way Voce can make several different selectors and it will detect if the html element has already received the expected effect.

If what Voce wants is to remove the effect on elements that already have it, Voce can do so:

function aplicaEfeito(el) {
    //Aqui aplica o efeito
}

function removeEfeito(el) {
    //Aqui remove o efeito
}

function isDOM(el) {
   return el && el instanceof HTMLElement;
}

jQuery.fn.foo = function() {
    this.each(function() {
       if (isDOM(this)) {
           if ($(this).attr("data-foo") !== "true") {
               $(this).attr("data-foo", "true");
                aplicaEfeito($(this));//Aplica o efeito
           } else {
                removeEfeito($(this));//Primeiro remove o efeito
                aplicaEfeito($(this));//Aplica o efeito novamente
           }
       }
    });
};

0

Do it:

delete $.fn.nomedoplugin;

This does not affect already initialized plugin instances.

  • What I really want is to zero the effects on the element when calling the function again.

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.