Unbind/Destroy fancybox 2 events

Question

I am having a strange issue, I have code that pulls content via ajax and then binds Fancybox (2) to certain elements. The issue is that when I "refresh" this page I call the same function that pulls and binds Fancybox again.

My normal approach that has been working up until I changed to Fancybox 2 is to unbind the elements and rebind them. This however does not seem to be working with FB2.

I have tried the following:

$('.tool_button').unbind('click.fb');
$('.tool_button').unbind('click');
$('.tool_button').unbind();
$('.tool_button').off('click.fb');
$('.tool_button').off('click');
$('.tool_button').off();

I did notice the following in the source file which may be of use (starting line 652):

// Unbind the keyboard / clicking actions
    unbindEvents: function () {
        if (F.wrap && isQuery(F.wrap)) {
            F.wrap.unbind('.fb');
        }

        D.unbind('.fb');
        W.unbind('.fb');
    }

If anyone could help here it would be much appreciated.

Thanks in advance. Nick

Answer 1

If you include the attribute live:false then you will be able to remove the handlers from your elements using .off()

After digging through the source code i've also found that the specific event is click.fb-start, if you want to target it specifically.

For example:

$(".fancybox").attr('rel', 'gallery').fancybox({live: false});
//remove click handler
$('.fancybox').off("click.fb-start");

​ FYI In the documentation it says the following about live:

live: If set to true, fancyBox uses "live" to assing click event. Set to "false", if you need to apply only to current collection, e.g., if using something like - $( "#page" ).children().filter('a').eq(0).fancybox();

jsFiddle

Here is a jsFiddle demonstrating

http://jsfiddle.net/DigitalBiscuits/DBvt7/211/