DIV重新加载后，jQuery Fancybox无法正常工作 [英] JQuery Fancybox not working after DIV reload

问题描述

我在我的网站上使用 Fancybox 打开到其他页面(外部页面)的链接.

I'm using Fancybox on my site to open links to other pages (external pages).

基本上，用户单击图像，这会打开一个包含外部页面的花式框.图像链接包含在另一个页面(父级)的DIV中显示的页面(子级)内.父级可以通过使用不同的参数重新加载子页面来重新加载DIV中的数据，这些参数将导致图像和链接发生更改.

Basically the user clicks on a image and this opens a fancybox containing the external page. The image links are contained within a page (the child) that is displayed within a DIV on another page (the parent). The parent has the ability to reload the data in the DIV by reloading the child page with different params that will cause the image and links to change.

这一切在第一次加载时都能完美运行.但是之后，当DIV重新加载包含不同数据的子页面时，fancybox弹出框将不再起作用.然后，如果我在页面上进行F5刷新，它将再次起作用.但是只有在第一次加载时.

This all works perfectly with the first load. But after that when the DIV is reloaded with the child page containing different data, the fancybox popup no longer works. If I then do a F5 refresh on the page, it works again. But only on the first load.

在子页面上的代码，用于为图像链接设置fancybox:

The code on the child page to setup fancybox for the image links:

$.noConflict();
$(document).ready(function() {
    $(".userdetailslink").fancybox({
        'width'             : '80%',
        'height'            : '80%',
        'autoScale'         : false,
        'transitionIn'      : 'elastic',
        'transitionOut'     : 'elastic',
        'type'              : 'iframe'
    });
});

我还尝试了以下相同的结果:

I've also tried the following with the same results:

$.noConflict();
$(".userdetailslink").ready(function() {
    $(".userdetailslink").fancybox({
        'width'             : '80%',
        'height'            : '80%',
        'autoScale'         : false,
        'transitionIn'      : 'elastic',
        'transitionOut'     : 'elastic',
        'type'              : 'iframe'
    });
});

任何帮助将不胜感激.

推荐答案

您是否使用AJAX方法加载div?您可以使用回调函数将事件处理应用于加载的内容.

Are you using the AJAX methods to load the div? You can use the callback function to apply the event handling to the loaded content.

 $("div").load("url", function(){
       $(".userdetailslink").fancybox({
    'width'             : '80%',
    'height'            : '80%',
    'autoScale'         : false,
    'transitionIn'      : 'elastic',
    'transitionOut'     : 'elastic',
    'type'              : 'iframe'
    });

 });

这样，它也可以在加载后运行.当然，您可以按原样进行初始加载.

This way it runs after the load as well. Of course you do the initial load as you are.

这篇关于DIV重新加载后，jQuery Fancybox无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！