Добавить плагин colorbox jQuery в динамически созданный элемент

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

$("a.colorbox").colorbox({ transition: "elastic" });

Недавно добавленные элементы не связаны таким образом.

Как добавить colorbox к динамически созданным элементам

<a class="colorbox"></a>

Ответ 1

Метод описанный здесь, предназначен для привязки к событию click для интересующих вас элементов (таких как .colorbox) и вызовите библиотечную функцию colorbox в обработчике:

$('.colorbox').live('click', function() {
  $.colorbox({href:$(this).attr('href'), open:true});
  return false;
});

Ответ 2

Вы также можете попробовать следующее:

$('.colorbox').live('click',function(e){
    e.preventDefault();
    $(this).colorbox({open:true});
});

Я думаю, что это немного чище, чем с помощью команды fn.

Ответ 3

Поскольку live обесценивается, вы должны использовать на

$('body').on('click', '.colorbox', function() {
    $('.colorbox').colorbox({rel: $(this).attr('rel')});
});

Этот код также позволяет группировать.

Ответ 4

Этот пост старый, но это может помочь другим: Решение simonthetwit в порядке, но вам нужно дважды щелкнуть ссылку триггера. Colorbox можно вызвать напрямую, поэтому это должно работать:

$( '.colorbox' ).live('click',function(e){
        e.preventDefault();
        $.colorbox({open:true});
        //inline example
        //$.colorbox({inline:true, width:"50%", href:"#inline_content"});
});

Ура!

Ответ 5

Вот решение, которое я нашел, чтобы избежать необходимости дважды щелкнуть ссылку, чтобы запустить событие:

$(document.body).delegate('.<my-class>', 'click', function(e) {  
    e.preventDefault();  
    $('.<my-class>').colorbox({<my-code>})  
});

Ответ 6

У меня была та же проблема, что и @sunburst с необходимостью дважды щелкнуть ссылку триггера. Используется тот же код, но .delegate() вместо .live(). Решила все и очистила мой jQuery!

Хорошее объяснение здесь: http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/