Fancybox, получая Fancybox для привязки с помощью LIVE() к элементам, загружаемым на страницу после загрузки

Question

У меня есть страница, которая загружается и после загрузки, она втягивает список LI для заполнения ленты новостей.

<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> 

Я пытаюсь получить причудливую коробку, чтобы вызвать, когда пользователь нажимает на быстрый просмотр, но не повезло. Есть идеи?

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

также попытался:

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

http://fancybox.net/

Спасибо за любые идеи ...

Answer 1

Проблема заключается в том, чтобы прикрепить fancybox в загруженный элемент AJAX, не так ли?

У меня такие же проблемы, и я нашел this solution.

скопировать вставить его здесь, увидеть оригинальный отчет об ошибке для получения дополнительной информации:

$.fn.fancybox = function(options) { 

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

Заслуга jeff.gran.

Answer 2

Из моего понимания Fancybox, призыв к fancybox() простой прикрепляет плагин для выбранного элемент. Звонок fancybox на мероприятии click ничего не откроет.

Я думаю, вам просто нужно добавить

$(li_element_that_you_create).fancybox(); 

к коду, который создает новые LI элементы в списке

EDIT

Если вы используете load, то вы что-то вроде:

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

Answer 3

это должно работать после каждого запроса Ajax

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

Answer 4

Старый вопрос, но может быть полезным для будущих искателей.

Я предпочитаю решение уволить FancyBox вручную в живом турнире, например:

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

EDIT: Из JQuery 1.7 живой() является устаревшим и() следует использовать вместо этого. См. http://api.jquery.com/live/ для получения дополнительной информации.

Answer 5

С .on теперь рекомендуется более .live, и после прочтения над documentation on delegated events, вот решение, которое я придумал (предполагая, что ваши элементы имеют класс «триггер-модальный»):

$(document).on('click', '.trigger-modal', function() { 
    // remove the class to ensure this will only run once 
    $(this).removeClass('trigger-modal'); 
    // now attach fancybox and click to open it 
    $(this).fancybox().click(); 
    // prevent default action 
    return false; 
});