Javascript 简单CSS id选择器不工作

自从我开始使用JSF页面以来，我一直在努力使用CSS选择器。我原以为我理解了基本概念，但后来发现我肯定遗漏了什么。当然我读过，但我的印象是这些例子对于我的用例来说太简单了。以下是我以极简形式得到的：

<?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>

...
$（文档）.ready（函数（）{
$（'sp'）。在（'click'，'tr'，function（）上{
var$item=$（this.closest（“tr”）.find（“td:nth child（1）”）.text（）.trim（）；
警惕（‘耶’）；
});
});   

单击数据表的行时，我希望弹出警报。在另一个xHTML页面上，这已经起作用了，但场景是没有包含scrollpanel的对话框

现在，我期望的是，#sp指的是唯一一个具有该id的元素。但这不起作用。此外，多次尝试包含表单（

findParamForm\\\\\:sp

或

findParamForm\\\:sp

或

findParamForm\\\\\\\\:sp

或

findParamForm>sp

）也不起作用。那么，我在这里的思维错误是什么？为什么我不能用id选择器

#

直接引用

sp

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

输入错误

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

---

基本上，访问由类似JSF的程序生成的ID并不太明智

formId:namingContainerId:componentId

因为如果重用组件，它们可能会改变。通过css类访问它们更明智

您正在做的事情以及BalusC提到的——您的JavaScript（客户端）代码基于JSFXHTML（服务器端）。JSF是一个HTML生成器，它生成的HTML在浏览器中（当您分析源代码时）与您在文本编辑器中看到的不同。我打赌您从未在浏览器中看到

标记

p:scrollPanel

将简单地生成两个带有某种样式的

标记

如果您真的想通过ID访问JSF组件，比如

formId:componentId

，那么您必须转义冒号，否则jQuery会认为它们是一些css伪选择器。这里有一个片段

XHTML

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

或

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

---

不，这只是一个错误，因为我简化了代码；）在javascript中转义JSF ID。这里有一个答案可以帮助你，因为这可能是一个一般性的提示（我不知道如何实现），这和我的问题有什么关系吗？我不知道我是否理解正确。如何在JSF生成的HTML输出上建立JS？谢谢你的回复。我不使用生成的ID，我只使用我提供给组件的ID。我知道我必须用双反斜杠转义冒号，而且我知道JSF会生成一个HTML页面。但我的问题是“当我使用

#givenId

时，为什么我不能通过属性

id

访问某个内容？”如果我不将脚本放在.xhtml文件中，如何将其添加到HTML中？我没有访问中间表单的权限，是吗？您可以通过元素的id来访问元素，只需在.js而不是.xhtml中转义它，并确保将id与它的核心的所有内容一起使用。顺便说一句，不要在XHTML中嵌入JS！啊哈！现在我们越来越近了。“预先添加到它的核心”如果id是唯一的，我需要预先添加什么以及为什么？请阅读JSF中的命名容器。基本上，

是一个命名容器，因此它为其中的每个组件预先添加了id。只要分析一下我的例子。这正是我一直在尝试和使用它的方式，只是我没有使用脚本将

：

替换为

\\：

，并预先编写

\

。那么现在很清楚了，有什么理由找不到身份证呢？

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

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