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

У меня есть страница, которая загружается и после загрузки, она втягивает список 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/

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

Ответ 1

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

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

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

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

Ответ 2

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

Мое предпочтительное решение - запустить fancybox вручную из живого события, например:

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

EDIT: из jQuery 1.7 live() устарел, а вместо него следует использовать(). Подробнее см. http://api.jquery.com/live/.

Ответ 3

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

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

Ответ 4

Так как .on теперь рекомендуется по .live, и после прочтения документации по делегированным событиям, вот решение, которое я придумал с (если ваши элементы имеют класс "триггер-модальный" ):

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

Ответ 5

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

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

$(li_element_that_you_create).fancybox();

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

ИЗМЕНИТЬ

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

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