Jquery Fancybox not working after postback

问题

I have a Fancybox (or more accurately) a number of fancy boxes on an asp.net page.

My Fancybox (jquery plugin) works fine until a postback occurs on the page then it refuses to work.

Any thoughts? Anyone experienced similar behaviour?

UPDATE : Some Code..

I have a databound repeater with a fancybox on each repeating item.

They are instanciated by (outside the repeater)

$(document).ready(function() {
            $("a.watchvideo").fancybox({
            'overlayShow': false,
            'frameWidth' : 480,
            'frameHeight' : 400
            });
        });

The anchor tag is repeated..

href="#watchvideo_<%#Eval("VideoId")%>"

As is a div with

id="watchvideo_<%#Eval("VideoId") %>

As is a script element that instanciates the flash movies

Yes the VideoIds are being output the the page.

UPDATE : It's not a problem with the flash..

It is not a problem with the flash as i've tried it without the flash, it wont even pop a window with a simple message in.

UPDATE : I wonder if it is the updatepanel.

Rebinding events in jQuery after Ajax update (updatepanel)

-- lee

回答1:

The problem is in using $(document).ready() to bind the fancybox. This code is only executed once, when the page is originally loaded. If you want the fancybox functionality on every postback, synchronous or asynchronous, replace the $(document).ready() with pageLoad(sender, args). i.e.

function pageLoad(sender, args) {
        $("a.watchvideo").fancybox({
        'overlayShow': false,
        'frameWidth' : 480,
        'frameHeight' : 400
        });
}

see this answer for more info

回答2:

Could it be that the instantiating code is being inserted at a piece of code which is not run after a postback?

回答3:

It was the Update panel as described

here.. Rebinding events in jQuery after Ajax update (updatepanel)

As suggested I simply replaced

$(document).ready(function() {
            $("a.watchvideo").fancybox({
            'overlayShow': false,
            'frameWidth' : 480,
            'frameHeight' : 400
            });
        });

with

function pageLoad(sender, args)
{
   if(args.get_isPartialLoad())
   {
       $("a.watchvideo").fancybox({
            'overlayShow': false,
            'frameWidth' : 480,
            'frameHeight' : 400
            });

   }
}

and it worked!

-- Lee

回答4:

This might help someone else, but FancyBox appends it's code to the <body> element... which is all fine and well, but resides OUTSIDE the asp.net <form> element. My postback problems went away when I modified FancyBox to append its dom objects to the <form> element:

$('body form:first').append( ... );

回答5:

I had a similar problem with a paged grid-view. The first page of the grid was launching the fancybox while the remaing did not.

I thought it could be an issue related to the UpdatePanel which refreshes only a portion of the screen.

I solved the issue replacing this:

 <script>
        $(document).ready(function () {

            $("a.small").fancybox();

        });
    </script>

with this:

  <script>
        function pageLoad(sender, args) {
            $("a.small").fancybox();
        };
    </script>

来源：https://stackoverflow.com/questions/1477219/jquery-fancybox-not-working-after-postback

标签

javascript

jquery

jquery-plugins

fancybox