Jquery Live with facebox plugin

Question

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.

score 6 · Answer 1 · answered Jan 19 '11 at 15:50

complementing Kobi answer with fabrik comment:

$('a[rel*=facebox]').live("mousedown", function() { 
    $(this).unbind('click'); //everytime you click unbind the past event handled.
    $(this).facebox();
});

so, you can prevent facebox multiply the events.

credits to kobi.

score 4 · Accepted Answer · answered Oct 13 '09 at 11:58

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();
});

This one is firing facebox n+1 times. Every time you click, facebox multiply itself. — fabrik, Apr 28 '10 at 07:40

score 1 · Answer 3 · answered Nov 11 '09 at 15:04

Thank you so much, I was having troubles, because after loading my dynamic content the rel=facebox seemed not to work at all

I just "re activated"

jQuery(document).ready(function($) { $('a[rel*=facebox]').facebox() })

after the ajax.response and voilá I can see the facebox pop up instead of the page from the link.

Thank you a lot kobi.

Jquery Live with facebox plugin

3 Answers3