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, верно?

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

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

$.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 вручную из живого события, например:

$('.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 3

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

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

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() просто прикрепляет плагин к выбранному элементу. призвание fancybox на click событие ничего не откроет

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

$(li_element_that_you_create).fancybox();

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

РЕДАКТИРОВАТЬ

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

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