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

Question

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

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

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

Как я могу добавить colorbox для динамически создаваемых <a class="colorbox"></a> элементов тоже?

Answer 1

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

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

Answer 2

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

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

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

Answer 3

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

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

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

Answer 4

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

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

Ура!

Answer 5

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

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

Answer 6

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

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