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

From my understanding of Fancybox, the call to fancybox() simple attaches the plugin to the selected element. Calling fancybox on a click event won't open anything.

I think you just need to add

$(li_element_that_you_create).fancybox();

to the code that creates the new LI elements in your list

EDIT

If you're using load, then you would do something like:

$('#ul_id_goes_here').load('source/of/news.feed', function() {
  $('.quickview').fancybox();
});

Answer 2

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.