可以'当它's位于最初未渲染的容器内

Can't make FancyBox works proprely when it's inside a container initially not renderd

本文关键字：于最初 当它 可以      更新时间：2023-09-26

我今天已经试着解决这个问题好几个小时了。我已经（在某种程度上）达成了解决方案，但没有像预期的那样奏效。

我是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可以正常工作。

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

改为在<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必须在用户单击链接之前应用。

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

这在jQuery 1.7中是新的。据我所知，PF3.0.x附带jQuery1.6。然后推荐.delegate()而不是.live()。但是，在新添加元素时，不能使用它们直接操纵元素。您只能在未来的事件中使用它们，如click、hover等。

我不得不将e.preventDefault（）添加到我的.js中，因为当我单击该链接弹出fancyBox时，该链接正在重定向到包含照片的url（例如：localhost:8080/../Images/Pic1.jpg）

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

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

$(this).fancybox();

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

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

这样做的目的是在页面加载时将fancybox直接应用于id为"example1"的链接，并且fancybox将在第一次单击时打开。

希望这能有所帮助。

据我所知，您需要首先在$(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();
    });
});
相关文章：