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

Я использую 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 для создания дополнительных ссылок, как это на лету, так:

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 внутри существующей страницы.

Есть идеи? Приветствия

4 голоса | спросил Craig Myles 26 PM00000020000002031 2010, 14:12:20

3 ответа


0

происходит следующее: 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'
  });
});
ответил Nick Craver 26 PM00000020000005931 2010, 14:20:59
0

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

ответил MrBliz 26 PM00000020000005731 2010, 14:16:57
0

Если вы хотите, чтобы ваш 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();

после того, как этот код остается в файле.

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

ответил Ankitkumar Bhatt 20 J0000006Europe/Moscow 2013, 15:42:47

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132