Search code examples
ajaxfaceboxjquery

Jquery Live with facebox plugin


I'm trying to use the jquery facebox plugin with live events (the official implemenatation, not the plugin).

My main page loads in a page via ajax. That remote page also has links to other remote pages which i would like to display in a popup dialog. I've been using the facebox plugin for this.

The below code doesn't work, and simply loads the remote page in to the viewport a a new page, not a popup.

<script type="text/javascript">
            jQuery(document).ready(function($) {

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

is this the correct way to use live events?

My development machine sadly consists of IE6 only[:(], so i can't use firebug to debug the code.


Solution

  • I guess the click event is too late to start the facebox.
    This might work with mousedown (seemed OK on my test, but it wasn't exactly the same)

    $('a[rel*=facebox]').live("mousedown", function() { 
        $(this).facebox(); // this should do, you don't need all links
    });
    

    I would recommend this either. I suggest activating the facebox after you finish the AJAX call:

    // sample code - you might use an other AJAX call
    $('#dynamicDiv').load('...', {}, function(){
        $('#dynamicDiv a[rel*=facebox]').facebox();
    });