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

Question

我有一个 jsf 页面，即使面板内有 link，整个面板都可以点击。这是通过将以下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 的样式类。

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

是否可以将 javascript 函数应用于页面的特定部分，例如 div 而不是整个页面？

Answer 1

是否可以将 javascript 函数应用于页面的特定部分，例如 div 而不是整个页面？

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

在你想要应用它的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();
    });
}