当 FancyBox 在最初未渲染的容器内时，无法使 FancyBox 正常工作答案

【问题标题】：Can't make FancyBox works proprely when it's inside a container initially not renderd当 FancyBox 在最初未渲染的容器内时，无法使 FancyBox 正常工作
【发布时间】：2012-03-17 13:24:06
【问题描述】：

我今天花了几个小时试图解决这个问题。我（以某种方式）找到了解决方案，但没有按预期工作。

我是 jQuery 世界的新手，所以我会尽量说清楚。在我的示例中，我有一个 xhtml 页面，其中包含另一个 xhtml 页面，其中 <ui:include> 标签。包含的页面最初并未呈现（由于包含所有图片）。当它通过<p:commandLink> 呈现时，页面会正确显示所有图片。每张图片都是<h:ouputLink>，它显示了一个fancyBox，但行为有点错误。

当最终呈现包含的页面并且我第一次单击 <h:ouputLink> 时，fancyBox 没有显示，但随后的单击打开了 fancyBox 并且它正常工作。我想不通为什么。我正在使用 jsf2、PrimeFaces 3.02、FancyBox 1.7。我的代码：

main.xhtml

    <--Main xhtml-->
<h:form id="myForm">
    <h:panelGrid id="panelGridMain"
        rendered="#{myBean.actualPage eq 'main'}">
        <p:commandLink
            id="showIncludedPage"
            actionListener="#{myBean.setPage('test')}"
            update="@form">
            <h:graphicImage value="/Image/TbnPic1.jpg"/>
        </p:commandLink>
    </h:panelGrid>

    <h:panelGroup id="myTestPanel"  rendered="#{myBean.actualPage eq 'test'}">
        <ui:include src="test.xhtml" />
    </h:panelGroup>
</h:form>

Test.xhtml

<ui:component xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"
    xmlns:c="http://java.sun.com/jsp/jstl/core">

    <h:outputLink value="/Images/Pic1.jpg" id="example1" title=""  >
            <h:graphicImage alt="example1" value="/Images/TbnPic1.jpg" />
    </h:outputLink>
</ui:component>

最后是我的 jQuery 代码

$(document).ready(
    function() {        
        $("#myForm\\:example1").live("click",function(e) {
            alert(e.isDefaultPrevented());
            if (! e.isDefaultPrevented()){
                e.preventDefault();
            }
            $(this).fancybox();
          });
});

一些声明：

*我认为.on() 是推荐的，但它对我不起作用，我需要做更多的测试。

*我必须将 e.preventDefault() 添加到我的 .js 中，因为当我单击链接以弹出 fancyBox 时，链接会重定向到包含照片的 url（例如：localhost:8080/.. /Images/Pic1.jpg)

*如果页面最初被渲染，fancyBox 工作正常。

感谢您的帮助，希望您能理解问题=）

【问题讨论】：

标签： javascript jquery jsf-2 fancybox

【解决方案1】：

据我了解，您需要先在$(document).ready 中初始化fancybox。如果您不这样做，那么在第一次单击事件中，fancybox 会自行初始化，随后的单击将按预期工作。初始化后，如果您将fancybox 与任何事件绑定，它应该只需单击即可工作。我有类似的问题，非常适合我。

$(document).ready(function() {    

    $("#myForm\\:example1").fancybox();

    $("#myForm\\:example1").live("click",function(e) {
          alert(e.isDefaultPrevented());
          if (! e.isDefaultPrevented()){
                e.preventDefault();
          }
          $(this).fancybox();
    });
});

【讨论】：

【解决方案2】：

改为在<p:commandLink> 的oncomplete 中工作。

<p:commandLink
    id="showIncludedPage"
    actionListener="#{myBean.setPage('test')}"
    update="@form"
    oncomplete="$('#myForm\\:example1').fancybox()">
    <h:graphicImage value="/Image/TbnPic1.jpg"/>
</p:commandLink>

关于你的问题：

当最终呈现包含的页面并且我第一次单击fancyBox 时，fancyBox 没有显示，但随后的单击打开了fancyBox 并且它可以正常工作。我不知道为什么。

Fancybox 必须在用户点击链接之前应用。

我认为 .on() 是推荐的，但它对我不起作用，我需要做更多的测试。

这是 jQuery 1.7 中的新功能。据我所知，PF 3.0.x 附带 jQuery 1.6。然后推荐.delegate() 而不是.live()。但是，当新添加元素时，您不能使用它们直接操作它们。您只能在 click、hover 等未来的活动中使用它们。

我必须将 e.preventDefault() 添加到我的 .js 中，因为当我单击链接以弹出 fancyBox 时，链接会重定向到包含照片的 url（例如：localhost:8080/ ../Images/Pic1.jpg)

这是正常的。 JavaScript 不会接管元素的默认行为。它只是增加了行为。如果你想阻止默认行为，你确实需要调用e.preventDefault()，或者如果live()更好，调用return false;。仔细阅读jQuery.live() API documentation。

【讨论】：

拍手，我需要更多的练习才能弄清楚这样的事情。再次感谢您提供的所有提示。

【解决方案3】：

在你编写的jQuery代码中，你在点击事件中所做的是：

$(this).fancybox();

这样，您在第一次点击链接时应用了幻想框。这就是为什么当您第二次单击链接时，fancybox 会完美打开。您可以通过在页面加载时应用 fancybox 来修复此行为，因此您必须将 jQuery 代码更改为：

$(document).ready(
    function() {        
        $("#example1").fancybox();
    }
);

这将做的是在页面加载时将fancybox直接应用到id为'example1'的链接，并且fancybox将在第一次点击时打开。

希望这会有所帮助。

【讨论】：