JQuery Fancybox not working after DIV reload

问题

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

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.

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.

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

Any help would be appreciated.

回答1:

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.

来源：https://stackoverflow.com/questions/4355566/jquery-fancybox-not-working-after-div-reload

标签

javascript

jquery

fancybox