Question

我今天一直试图解决这个问题几个小时。我已达到（以某种方式）解决方案，但未按预期工作。

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

当最终呈现包含的页面时，我第一次点击fancyBox没有显示<h:ouputLink>，但后续点击打开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的链接时，链接重定向到包含照片的网址（例如：localhost：8080 / .. /Images/Pic1.jpg）

*如果页面最初呈现，则fancyBox正常工作。

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

Answer 1

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

<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中的新功能。据我所知，PF 3.0.x附带jQuery 1.6。然后推荐.delegate()而不是.live()。但是，在新添加元素时，不能使用它们直接操作元素。您只能在click，hover等
等未来事件中使用它们

我不得不把e.preventDefault（）添加到我的.js，因为当我点击弹出的的fancybox的链接，该链接被重定向到包含图片的网址（如：本地主机：8080 / ../图像/ Pic1.jpg）

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

Answer 2

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

$(this).fancybox();

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

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

这样做会将fancybox直接应用于页面加载时id为'example1'的链接，并且首次点击时会打开fancybox。

希望这有帮助。

Answer 3

据我了解，您需要先在$(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();
    });
});

当FancyBox最初未呈现时，无法使FancyBox正常工作

3 个答案: