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.

Answer 2

this should work after every ajax request

$(document).ajaxStop(function() { 
    $("#whatever").fancybox();
});

Answer 3

The problems is to attach fancybox into AJAX loaded element, right?

I got same problems and I found this solution.

I copy paste it here, see the original bug report for more info:

$.fn.fancybox = function(options) {

$(this)
  .die('click.fb')
  .live('click.fb', function(e) {       
    $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() : {})))
    e.preventDefault();
    [...]

Credit goes to jeff.gran.