Добавление динамически генерируемого html с использованием jQuery не очень хорошо работает с Fancybox

Question

Я использую Fancybox (http://fancybox.net), чтобы открыть iFrame. Для этого я создаю ссылку с классом, установленным в "item_pop", следующим образом:

<div id="events">
    <a href="http://www.example.com" class="item_pop">My Link</a>
</div>

Затем в нижнем колонтитуле есть некоторый JavaScript, который поддерживает это:

jQuery(".item_pop").fancybox({
        'width'             : 900,
        'height'            : 500,
        'autoDimensions'    : true,
        'autoScale'         : true,
        'transitionIn'      : 'elastic',
        'titleShow'         : false,
        'transitionOut'     : 'elastic',
        'centerOnScroll'    : true,
        'type'              : 'iframe'
});

Хорошо, так что все это работает плавно. Проблема в том, что я использую jQuery для создания дополнительных ссылок, как это на лету, так:1009 *

jQuery(document).ready(function(){
        update_seconds = 20;
        update_duration = update_seconds * 1000;

        window.setInterval(reload_events, update_duration);
});

function reload_events()
{       
        jQuery.post("http://www.example.com", {type:'any'}, function(data){
            var events = eval(data);
            var html = '';

            for(var i=0; i<events.length; i++){
                var evt = events[i];

                html += '<a href="http://www.example.com" class="item_pop">My Link</a>';
            }

            jQuery('#events').children().remove();
            jQuery('#events').append(html);
        });
}

Это фактически отображает ссылки на экран, но когда вы нажимаете на них, они не открывают iFrame. Вместо этого они открывают предполагаемую страницу как новую страницу, а не как iFrame внутри существующегостр.

Есть идеи? Ура

Answer 1

происходит то, что jQuery(".item_pop") находит элементы, соответствующие селектору в то время , и связывается с ними. Поскольку вы создаете новые элементы позже, вам необходимо привязать их.

После этого звонка:

jQuery('#events').append(html);

Вам необходимо снова выполнить вызов .fancybox() для этого набора новых элементов:

jQuery("#events .item_pop").fancybox({ ... });

---

Или, альтернативно (и менее эффективно), вы можете использовать плагин .livequery() , например:

jQuery(".item_pop").livequery(function() {
  jQuery(this).fancybox({
    'width'             : 900,
    'height'            : 500,
    'autoDimensions'    : true,
    'autoScale'         : true,
    'transitionIn'      : 'elastic',
    'titleShow'         : false,
    'transitionOut'     : 'elastic',
    'centerOnScroll'    : true,
    'type'              : 'iframe'
  });
});

Answer 2

Если вы хотите, чтобы ваш Fancybox работал с динамическими элементами управления, вы должны изменить это в файле JQuery Fancybox.

Вот как мой jquery.fancybox-1.3.4.js выглядит примерно в строке 787:

$.fn.fancybox = function(options) {

   $(this)
.die('click.fb').live('click.fb', function(e) {

   $(this).data('fancybox', $.extend({}, options, ($.metadata ? $(this).metadata() :
{})))


   e.preventDefault();

после того, как этот код будет таким же в файле.

после изменения в файле Fancybox JQuery вам не нужно будет менять код.

Answer 3

Проблема в том, что я вижу, что fancybox ничего не знает об этих дополнительных ссылках, поскольку JavaScript интерпретируется только при загрузке страницы. Вам нужно использовать jQuerys .Live () , чтобы fancybox был в курсе любого динамически создаваемого контента.