Jquery Fancybox在页面回传后无法工作

Question

我在一个asp.net页面上有一个Fancybox（或者更准确地说是多个fancy box）。

我的Fancybox（jquery插件）在页面没有postback的情况下运行良好，但一旦页面发生postback，它就无法正常工作。

有什么想法吗？有人遇到过类似的问题吗？

更新：一些代码...

我有一个带有fancybox的数据绑定重复器，每个重复项都有一个fancybox。

它们通过（在重复器之外）实例化。

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

锚点标签被重复使用...

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

同样有一个包含HTML标签的div。

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

这是一个脚本元素，用于实例化Flash电影。

是的，VideoIds正在输出到页面。

更新：问题并不在Flash上。

这不是Flash的问题，因为我已经尝试过没有Flash，它甚至不会弹出一个简单消息的窗口。

更新：我想知道是否是updatepanel的问题。

在Ajax更新（updatepanel）后重新绑定jQuery事件

-- 李

- Lee Englestone

---

请发布有问题的代码，这样我们才能提供帮助。如果没有代码，我们只能进行猜测。 - catsby

Answer 1

问题在于使用$(document).ready()来绑定fancybox。该代码仅在页面最初加载时执行一次。如果您想在每次同步或异步回发时都要使用fancybox功能，请将$(document).ready()替换为pageLoad(sender，args)。

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

查看此答案以获取更多信息

- Russ Cam

---

谢谢Russ，看起来如果我没有自己解决问题，你可能已经帮我解决了。非常感谢。谢谢，-- 李 - Lee Englestone

没问题，很高兴能帮忙。我强烈建议查看另一个答案中的链接 - 文章很有价值，ASP.NET AJAX文档可能非常有用。 - Russ Cam

谢谢，我也遇到了这个问题，而且我对jQuery还不是很熟悉。这个解决了！非常感谢您发布这个。 - Frank Hale

+1 这对我非常有帮助。我也是新手jQuery，一直在尝试拼凑示例，你的答案填补了我的空白。谢谢！ - Deverill

Answer 2

正如描述的那样，这是一个更新面板。

在这里... 在 Ajax 更新（更新面板）后重新绑定事件的 jQuery 方法

根据建议，我只是简单地替换了

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

带着

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

   }
}

它起作用了！

-- 李

- Lee Englestone

Answer 3

可能是实例化代码被插入到了一个在PostBack后不运行的代码片段中吗？

- Ropstah

---

有趣的是，fancybox实例化代码位于aspx页面上。我可能会尝试从代码后台将其写入页面。 - Lee Englestone

Answer 4

这可能会帮助其他人，但是FancyBox将其代码附加到元素中...这一切都很好，但它位于asp.net

元素之外。当我修改FancyBox以将其dom对象附加到元素时，我的postback问题消失了：

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

- Ryan Wheale

Answer 5

我在使用分页网格视图时遇到了类似的问题。网格的第一页可以启动fancybox，而其他页面却不能。

我认为这可能与只刷新屏幕的一部分的UpdatePanel有关。

我通过替换以下内容来解决了这个问题：

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

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

        });
    </script>

使用这个：

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

- Michele Ferracin