JQuery Fancybox在DIV重新加载后无法工作

Question

我在我的网站上使用Fancybox来打开指向其他页面（外部页面）的链接。

基本上用户点击一个图像，这将打开一个fancybox包含外部页面。图像链接包含在另一个页面（父级）的DIV中显示的页面（子级）中。家长有能力重新加载DIV中的数据，通过用不同的参数重新加载子页面，这会导致图像和链接改变。

这一切都与第一次加载完美。但之后，当DIV重新加载包含不同数据的子页面时，fancybox弹出窗口不再有效。如果我然后在页面上进行F5刷新，它会再次运行。但只限于第一次加载。

子页面上的代码设置的fancybox的图像链接：

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

我也试着用同样的结果如下：

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

任何帮助，将不胜感激。

Answer 1

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

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

}); 

这样它也在加载后运行。当然，你会像现在这样做初始加载。