當FancyBox在最初不渲染的容器內時，無法使FancyBox正常工作

今天我一直在試圖解決這個問題。我已達到（以某種方式）解決方案，但未按預期工作。當FancyBox在最初不渲染的容器內時，無法使FancyBox正常工作

我是新進入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(); 
      }); 
});

一些aclarations：

*我紅色，推薦.on()，但它不適合我，我需要做更多的測試。

*我必須添加e.preventDefault（）到我的.js因爲當我點擊鏈接彈出fancyBox，鏈接重定向到包含照片的URL（例如：localhost：8080 /。 ./Images/Pic1.jpg）

*如果頁面最初呈現fancyBox工作正常。

感謝您的幫助，我希望你能明白這個問題=）

來源

2012-02-28 Camauu

改爲在<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必須施加用戶點擊鏈接之前。

我紅認爲。對（）的建議，但它並沒有爲我工作，我需要做更多的測試。

這是jQuery 1.7中的新功能。據我所知，PF 3.0.x帶有jQuery 1.6。然後建議.delegate()超過.live()。但是，您不能使用它們在新添加元素時直接操作元素。您只能使用他們對未來的事件，如click，hover等

我不得不把e.preventDefault（）添加到我的.js，因爲當我點擊鏈接彈出的的fancybox，鏈接被重定向到包含該照片的URL（例如：本地主機：8080個/../圖像/ Pic1.jpg）

這是正常的。 JavaScript不會接管元素的默認行爲。它只是增加了行爲。如果您想阻止默認行爲，則確實需要撥打e.preventDefault()，或者撥打live()，撥打return false;。仔細閱讀jQuery.live() API documentation。

來源

2012-02-28 13:45:47 BalusC

拍手，我需要更多的練習才能找到像這樣的東西。再次感謝這一點以及所有提示。 – Camauu 2012-03-01 03:01:42

不客氣。 – BalusC 2012-03-01 03:05:20

在你寫的jQuery代碼，您在單擊事件正在做的事情是：

$(this).fancybox();

這樣，當鏈接被第一次點擊時，你正在應用fancybox。這就是爲什麼當你第二次點擊鏈接時，fancybox完美打開。您可以通過應用在頁面載入的fancybox解決這個問題，所以你必須改變jQuery代碼這樣：

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

這將完成直接應用的fancybox的鏈接ID爲「示例1 '在頁面加載和fancybox將打開第一次點擊。

希望這會有所幫助。

來源

2012-02-28 04:25:47 Vishal

據我瞭解，您需要首先初始化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(); 
    }); 
});

來源

2013-05-02 15:01:42 Mahib

當FancyBox在最初不渲染的容器內時，無法使FancyBox正常工作

回答

相關問題