Question

自从我开始使用JSF页面以来，我一直在努力使用CSS选择器。我以为我理解了基本概念，但事实证明我必须遗漏一些东西。我当然读过http://api.jquery.com/category/selectors/，但我的印象是这些例子对我的用例来说太简单了。所以这就是我以简约形式得到的东西：

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<ui:define name="center">
    <p:dialog header="Dialog" widgetVar="findParamDialog" resizable="false" id="findParamDlg" modal="true">
        <h:form id="findParamForm">
            <p:scrollPanel id="sp" mode="native">  
                <p:dataTable id="qPdt" var="p" value="..." rowKey="#{p}" selection=""
                 selectionMode="single">
                    <p:column>...</p:column>
                </p:dataTable>
            </p:scrollPanel>

        <script>
        $(document).ready(function() {
            $('#sp').on('click','tr',function() {
                var $item = $(this).closest("tr").find("td:nth-child(1)").text().trim();
                alert('ye');
            });
        });   
        </script>

        </h:form>
    </p:dialog>        
</ui:define>

当我点击我的数据表的行时，我想要警告弹出窗口。在另一个xHTML页面上，这已经有效，但情况是没有包含滚动面板的对话框。

现在，我期望的是#sp引用具有该id的唯一元素。但那不起作用。此外，多次尝试包含表单（findParamForm\\:sp或\\:findParamForm\\:sp或#findParamForm\\:sp或findParamForm sp或findParamForm > sp）也不起作用。那么我的思维错误在这里是什么？为什么我不能仅使用ID选择器sp来引用#？

我的印象是与这些所谓的容器元素有关。请告诉我这里缺少什么。我99.99％肯定脚本本身正在工作，所以我怀疑选择器。提前致谢

Answer 1

拼写错误

$("#sp").on("click","tr",function() {
     ^^^^-----

Answer 2

基本上，访问由JSF生成的ID（如

）并不明智

formId:namingContainerId:componentId

因为如果重复使用组件，它们可能会发生变化。通过css类访问它们要明智得多。

您正在做什么以及BalusC提到的内容 - 您将JavaScript（客户端）代码基于JSF XHTML（服务器端）。 JSF是一个HTML生成器，它生成的HTML在浏览器中（当您分析源代码时）与您在文本编辑器中看到的不同。我打赌你从未在浏览器中看到<h:panelGroup>标签。 p:scrollPanel只会生成一些带有某种风格的<div>代码。

如果你真的想通过它的ID formId:componentId访问JSF组件，那么你必须逃避冒号，否则jQuery认为它们是一些css伪选择器。这是一个片段。

<强> XHTML

<h:form id="formId">
    <h:panelGroup id="componentId" style="display: none;" />
    <h:panelGroup onclick="test('formId:componentId');" />
</h:form>

<强>输出

<form id="formId" ...>
     <span id="formId:componentId" style="display: none;" />
     <span onclick="test('formId:componentId');" />
</form>

<强>的JavaScript

function test(id) {
     id = id.replace(/:/g, "\\:");
     $("#" + id).show();
}

或

function test(id) { element = document.getElementById(id); $(element).show(); }

简单的CSS id-selector无法正常工作

2 个答案: