FancyBox 在 h:form 中不起作用答案

【问题标题】：FancyBox doesn't work inside a h:formFancyBox 在 h:form 中不起作用
【发布时间】：2012-03-17 05:19:16
【问题描述】：

我在显示花式框窗口时遇到问题。我真的对jquery一无所知，我正在迈出第一步，所以我希望你耐心等待。我的例子：

<h:form>
        <h:outputLink id="example1" value="/Images/Flor1.jpg"  title=""  >
                <h:graphicImage alt="example1" value="/Images/TbnFlor1.jpg" />
        </h:outputLink>
</h:form>

jquery 函数

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

这不起作用，如果输出链接在表单之外，fancybox 可以工作。我一直在寻找解决此问题的答案，但仍然找不到。希望大家能帮帮我，谢谢！

【问题讨论】：

标签： jquery jsf-2 fancybox

【解决方案1】：

JSF 生成 HTML。 JavaScript/jQuery 仅适用于 HTML DOM 树，不适用于原始 JSF 源代码。在您的网络浏览器中打开该页面，右键单击它并执行查看源代码。您将看到生成的 HTML <a> 元素的 ID 以 JSF <h:form> 生成的父 <form> 的 ID 为前缀。您需要在 jQuery 选择器中使用该 ID。

所以，

<h:form id="form">
    <h:outputLink id="example1" value="/Images/Flor1.jpg"  title=""  >
        <h:graphicImage alt="example1" value="/Images/TbnFlor1.jpg" />
    </h:outputLink>
</h:form>

与

$('#form\\:example1').fancybox();

或

$("[id='form:example1']").fancybox();

应该这样做。 : 是 CSS 选择器中的非法字符，因此必须对其进行转义。

然而，使用样式类更容易。

<h:outputLink ... styleClass="fancybox" />

与

$(".fancybox").fancybox();

这样您就可以更轻松地将其应用到未来的其他元素上，而无需更改 jQuery 代码。

另见：

How to select JSF components using jQuery?

【讨论】：