将 h:outputScript 应用于 h:panelGroup 而不是整个 jsf 页面答案

【问题标题】：Apply h:outputScript to a h:panelGroup and not to the whole jsf page将 h:outputScript 应用于 h:panelGroup 而不是整个 jsf 页面
【发布时间】：2017-03-20 15:09:58
【问题描述】：

我有一个 jsf 页面，即使面板内有链接，也可以点击整个面板。这是通过将以下js函数应用于jsf页面来完成的。（请注意页面结构）

<h:panelGroup layout="block" styleClass="col-md-3">
    <h:form>
        <ui:repeat> 
            //lots of panels and panel groups   
        </ui:repeat> 

        **<h:outputScript>
            $(function() {
                setupPanelLinks();
            });
        </h:outputScript>**    

    </h:form>    
</h:panelGroup>
<h:panelGroup id =**"SeceondPanelGroup"** layout="block" styleClass="col-md-6 col-md-offset-1">
</h:panelGroup>

js 函数在另一个单独的 .js 页面上的位置

function setupPanelLinks() {
    $(".panel").click(function() {
        window.location.href = $(this).find("a.myLink").attr('href');
    });

    $(".panel a").click(function(e) {
        e.stopPropagation();
    });
}

其中 myLink 是应用于第一个 ui:repeat 内的 h:link 的 styleClass。

现在一切正常。问题是javascript函数应用于jsf页面中的所有面板，因为我只想将它应用于上部面板组而不是“SecondPanelGroup”。我的 JS 知识有限，但我猜我们需要 js 函数的目标来缩小其范围。有什么建议可以实现吗？

javascript函数能否应用于页面的某个部分，例如div而不是整个页面？

【问题讨论】：

Javascript是应用客户端，网络服务器端，所以生成的html而不是xhtml是相关的！

标签： javascript ajax jsf-2.2

【解决方案1】：

javascript函数能否应用于页面的某个部分，例如div而不是整个页面？

是的，javascript 函数可以做到这一点。在您的情况下，该函数应用于整个页面，或者说应用于所有 panelGroups，因为在您的函数 setupPanelLinks() 中，您使用 (".panel")，这就是在 html 中呈现 panelGroups 的方式。

在要应用的 panelGroups 上，给它们一个 id（如果它们不止一个，给它们一个 styleClass，因为 id 不能在同一个 jsf 页面中重复）并在你使用这个 id/styleClass函数而不是 (".panel") .e.g.

function setupPanelLinks() {
    $(".clickablePanel").click(function() {
        window.location.href = $(this).find("a.myLink").attr('href');
    });

    $(".clickablePanel a").click(function(e) {
        e.stopPropagation();
    });
}

【讨论】：