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 вручную из прямой трансляции, например:

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

РЕДАКТИРОВАТЬ: Начиная с jQuery 1.7, live () устарела, и вместо этого следует использовать on (). См. http://api.jquery.com/live/ для получения дополнительной информации.

Answer 2

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

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

Answer 3

Проблема в том, чтобы прикрепить 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 .

Answer 4

Поскольку .on теперь рекомендуется более .live и после прочтения документации о делегированных событиях , вот решение, которое я придумал (предполагая, что у ваших элементов есть класс 'trigger-modal «):

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

Answer 5

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

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

$(li_element_that_you_create).fancybox();

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

EDIT

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

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