Facebox only works once

Question

Am binding my Facebox requests just how the documentation says on the Facebox website.

But after I click one of the div.comment's the Facebox request doesn't work again.

The code I am using is just below and further down is my error.

$(document).ready(function() {
    $('.comment').bind('click', function() {
        $.facebox({ajax: '/project/cake_app/comment/tweets/' + $(this).attr('id')});
    }); 
});

Error:

Uncaught TypeError: Object function (a,b){return new d.fn.init(a,b,g)} has no method 'facebox'

Answer 1

I solved my problem by switching from Facebox to Fancybox, it seems their is a bug with Facebox that is unbinding the event after it is used once.

Answer 2

$(document).ready(function() {
    $('.comment').bind('click', function() {
        $.facebox({ajax: '/project/cake_app/comment/tweets/' + $(this).attr('id')});
$(".comment").unbind('click');
    }); 
});

hope that it works

Answer 3

have you tryed using live like:

$(document).ready(function() {
    $('.comment').live('click', function() {
        $.facebox({ajax: '/project/cake_app/comment/tweets/' + $(this).attr('id')});
    }); 
});

Answer 4

The reason Kim's suggestion to replace the bind() with live() didn't work is because the problem is not that the original click event handler gets lost.

As the error suggests:

Uncaught TypeError: Object function (a,b){return new d.fn.init(a,b,g)} has no method 'facebox'

The problem is that the jQuery $ object loses the .facebox() method. Facebox works fine closing and reopening the window EXCEPT when you load jQuery INSIDE the facebox. Doing that reinitializes jQuery after facebox has already been loaded, so facebox doesn't have a chance to re-add itself to the jQuery $ object when jQuery reinitializes.

I solved this problem by removing jQuery from the code which loads in the facebox. If jQuery is already loaded on the main page, then it is in the environment and there is no need to load it again inside the facebox code. This is only an issue if you rely on jQuery in both your main page AND in the code inside the facebox. I suppose if you HAVE to load jQuery again inside the facebox, you can use a seperate instance by using jQuery.noConflict().