5

I have a plugin like

$.fn.mycoolplugin

which binds mousemove to the document like

$(document).("mousemove", function() {
    //bunch of stuff
});

after you call the function on a selector

$('.myclass').mycoolplugin();

How would I unbind this because the mousemove is bound to the document and OTHER stuff in my code uses mouseenter and mouseleave ?

Tom
  • 53
  • 1
  • 3
  • 1
    Generally standard jQuery plugins have a destroy method so you can call $('.myclass').mycoolplugin('destroy'). You may want to add that in. There is an example of this in the jQuery authoring docs. – John Kalberer Aug 17 '11 at 17:41
  • @john - yeah I tried to contact the author - but alas no response :( – Tom Aug 17 '11 at 17:49
  • You gotta remember all the elements bound to the event and call unbind each. – Tae-Sung Shin Aug 17 '11 at 17:41

2 Answers2

0

You can unbind any handler by calling .unbind:

$(document).unbind("mousemove");

This will unbind all mousemove handlers from document. Do note that doing this might break the plugin's functionality (with the risk of breaking any other code/plugin that adds mousemove handler to document).

Mrchief
  • 75,126
  • 20
  • 142
  • 189
  • thanks :) yeah I tried that - the problem is that unbinds all events on the document which causes issues with other sections of my code that use `mouseenter` and `mouseleave` ? – Tom Aug 17 '11 at 17:39
  • It'll only unbind `mousemove`, and not `mouseleave`/`mouseenter` – Mrchief Aug 17 '11 at 17:41
  • yeah I also use `mousemove` on another part :D Nightmare really :/ – Tom Aug 17 '11 at 17:41
  • 1
    Then use namespaced events in your code: `$(document).bind("mousemove.myCode");`. and unbind the namespaced event only. – Mrchief Aug 17 '11 at 17:43
  • yep, I'll use namespaces as you've suggested :) Will make it much simpler consider plugin doesn't have `destroy`. Thanks! – Tom Aug 17 '11 at 17:56
  • btw - can you unbind a function like `$(document).unbind('mousemove', myfunction(event_data));` – Tom Aug 17 '11 at 18:00
0

You would change how your plugin binds and then releases it's attached handlers like so:

  1. You make a function that is responsible for binding all your initial events (such as the mousemover, etc)
  2. You make a function that is responsible for unbinding all your initial events.

  3. When you bind to an event, do not use an anoymous function. Instead, define a specific handler for the event. That way, when you attach, you do so like so:

    $(document).bind('mousemove', myFuncDelegate);

And then when you need to remove it from scope, you unbind:

 $(document).unbind('mousemove', myFuncDelegate);

That way you only unattach your events. See http://api.jquery.com/unbind/ for details.

Simply call your bind method on load, and when you decide to unload it, call the unbind method.

Tejs
  • 40,736
  • 10
  • 68
  • 86
  • 3
    Another way to do it is to give your mousemove a "namespace" -> $(document).bind('mousemove.myNs', function() { }); and then $(document).unbind('mousemove.myNs'); – Keith Rousseau Aug 17 '11 at 17:45