binding - Fancybox, getting Fancybox to bind using LIVE() to items being loaded onto the page after load

Question

I have a page that loads and after it loads, it pulls in a list of LIs to populate a news feed.

<li><a href="/url/" class="quickview">quick view</a></li>
<li><a href="/url/" class="quickview">quick view</a></li>
<li><a href="/url/" class="quickview">quick view</a></li>

I'm trying to get fancy box to trigger when a user clicks on quick view but haven't had any luck. Any Ideas?

$(document).ready(function() {
    $('.quickview').fancybox();
});

also tried:

$(document).ready(function() {
   $('a.quickview').live('click', function() {
        $(this).fancybox();
    });
});

http://fancybox.net/

Thanks for any ideas...

Answer 1

Old question, but might be useful for future searchers.

My preferred solution is to fire fancybox manually from within the live event, eg:

$('.lightbox').live('click', function() {
    $this = $(this);
    $.fancybox({
        height: '100%',
        href: $this.attr('href'),
        type: 'iframe',
        width: '100%'
    });
    return false;
});

EDIT: From jQuery 1.7 live() is deprecated and on() should be used instead. See http://api.jquery.com/live/ for more info.