jQuery Ajax Facebox

I have a "live search" type of page, which calls another page with ajax to check the validity of an input. It returns an image that you can click on to see more information about the product. The image has a rel="facebox" attribute, that is meant to bring up a facebox with div information in it when clicked. However, I must click on the image twice for the facebox to load. Here is the Jquery live code I'm using:

            jQuery(document).ready(function($) {

            $('a[rel*=facebox]').live("click", function() {
                $(this).facebox();
            });
        });

Thanks in advance!

What's happening, is that you're initializing facebox onclick. The first call will add a handle to the click event to open the facebox, so if you don't have a callback to do this when you receive those live results, you'll have to do something like this:

$('a[rel*=facebox]').live("click", function() {
    $(this).unbind("click").facebox().trigger("click");
    return false;
}

But this is ugly :-(. Even, it's possible that, as you're using "live", the event will be re-binded to the element when some new element arrives :S You can verify this with console.log.

A cleaner way, is add an init property to facebox, called autoStart or something similar, wich will initialize the facebox, and open it in the same function.

Good luck!

Use this only:

$(function(){
    $('a[rel*=facebox]').facebox();
});

or even drop the * (if that's the only class on a link) it will create the facebox div structure, when you're using it with click event first click is generating the div and second one is opening the facebox.

Oh one more thing, as the content is dynamically generated, you can use callback to run this line of code to reattach the click event.

Cheers

G.