jQuery: best practice for unsetting / removing function events?

Question

I'm using the jQuery plugin Cloud Zoom, and I've altered the initialization so that the image is zoomed when the user clicks on a "magnify button" instead of hovering. I'm not sure how to unset/remove this event when the user leaves the image though, and I'd be very interested to hear what the best practice would be.

This is what the script looks like -

$('.magnify').click(function() {
    $('.cloud-zoom').CloudZoom({ showTitle: false });
    return false;
});

$('.display').mouseout(function() {
  // unset?
});

(".display" is a container) Is bind/unbind necessary? It seems it might do the trick, but I wish there was an easier method since it's just about one function.

This is a decent article on what your click function is misused. http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ — Jamie R Rytlewski, Oct 31 '11 at 20:01
Jamie: Interesting article, will make sure to read and apply those practices. — Staffan Estberg, Oct 31 '11 at 22:57

score 6 · Accepted Answer · answered Oct 31 '11 at 19:40

6

Simply use the destroy function of CloudZoom:

$('.cloud-zoom').data('zoom').destroy();

Note that this destroys only the first occurence, if you have more than one use:

$('.cloud-zoom').each(function(){
  $(this).data('zoom').destroy();
});

answered Oct 31 '11 at 19:40

topek

18,609
3
35
43

Thanks, that worked! Got kind of the same reply from the creator as well, however I think it's important to check if the data exists, otherwise there will be a lot of unnecessary warnings. `$('.cloud-zoom').each(function() { if ($(this).length) { $(this).data('zoom').destroy(); } });` – Staffan Estberg Nov 01 '11 at 00:35

score 5 · Answer 2 · answered Feb 27 '13 at 20:00

5

For the Star Plugins version 3 it is

$('.cloudzoom').data('CloudZoom').destroy();

answered Feb 27 '13 at 20:00

Ian Fleeton

1,157
8
14

score 0 · Answer 3 · answered Oct 31 '11 at 20:03

0

So you are trying to "remove" the zoomed image when you mouseout? That seems to be a bit of an accessibility issue. Also, what if you lose track of your mouse, so that mean the zoom will leave if you shake your mouse a bit and accidentally leave the display? Seems a bit clunky. Why not have something like when you click elsewhere besides the image?

answered Oct 31 '11 at 20:03

Jamie R Rytlewski

1,172
9
22

Yes, that might be a better option. However the plugin's original function is to abort the effect on mouse out. My only addition is to initiate it with another method. – Staffan Estberg Oct 31 '11 at 22:59

jQuery: best practice for unsetting / removing function events?

3 Answers3