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

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

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

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

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

<a class="colorbox"></a>
элементы тоже?

15
anchor colorbox jquery

6 ответов

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

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

вы также можете попробовать это:

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

Я думаю, что это немного чище, чем использовать

18

As live амортизируется, вы должны использовать on

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

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

12

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

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

Ура!

4

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

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

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

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

0