使用 jQuery 附加动态生成的 html 不能很好地与 Fancybox 配合使用 [英] Appending dynamically generated html using jQuery does not play well with Fancybox

问题描述

我正在使用 Fancybox (http://fancybox.net) 来打开一个 iFrame.为此，我创建了一个链接，其类设置为item_pop"，如下所示:

<a href="http://www.example.com" class="item_pop">我的链接</a>

然后我在页脚中有一些 JavaScript 支持:

jQuery(".item_pop").fancybox({宽度":900，'高度':500，'autoDimensions' : 真,'自动缩放':真，'transitionIn':'弹性'，'titleShow' : 假,'transitionOut':'弹性'，'centerOnScroll' : 真,'类型':'iframe'});

好的，所以这一切都很顺利.问题是我使用 jQuery 来动态创建这样的附加链接:

jQuery(document).ready(function(){更新秒 = 20;update_duration = update_seconds * 1000;window.setInterval(reload_events, update_duration);});函数 reload_events(){jQuery.post("http://www.example.com", {type:'any'}, function(data){var 事件 = eval(data);var html = '';for(var i=0; i

这实际上显示了指向屏幕的链接，但是当您单击它们时，它们不会弹出 iFrame.相反，他们将预期页面作为新页面打开，而不是作为现有页面内的 iFrame.

有什么想法吗?干杯

解决方案

发生的事情是 jQuery(".item_pop") 找到匹配选择器的元素当时并绑定到那些.由于您稍后要创建新元素，因此您需要绑定到它们.

在这次通话之后:

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

您需要在这组新元素上再次运行 .fancybox() 调用:

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

<小时>

或者(效率较低)您可以使用 .livequery() 插件，像这样:

jQuery(".item_pop").livequery(function() {jQuery(this).fancybox({宽度":900，'高度':500，'autoDimensions' : 真,'自动缩放':真，'transitionIn':'弹性'，'titleShow' : 假,'transitionOut':'弹性'，'centerOnScroll' : 真,'类型':'iframe'});});

I'm using Fancybox (http://fancybox.net) to pop open an iFrame. In order to do so, I create a link with a class set to "item_pop" as so:

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

I then have some JavaScript in the footer that supports this:

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

Ok, so this all works swimmingly. The problem is that I use jQuery to create additional links like this on the fly as so:

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);
        });
}

This actually displays the links to screen, but when you click on them they don't pop up the iFrame. Instead they open the intended page as a new page, rather than as an iFrame inside the existing page.

Any ideas? Cheers

解决方案

what's happening is that jQuery(".item_pop") finds elements matching the selector at that time and binds to those. Since you're creating new elements later, you need to bindto them.

After this call:

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

You need to run the .fancybox() call again, on this set of new elements:

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

---

Or alternatively (and less efficient) you can use the .livequery() plugin, like this:

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'
  });
});

这篇关于使用 jQuery 附加动态生成的 html 不能很好地与 Fancybox 配合使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！