使用 jquery 更新数据表内的 primefaces 命令按钮

【问题标题】：primefaces command button update inside data table with jquery使用 jquery 更新数据表内的 primefaces 命令按钮
【发布时间】：2013-11-14 00:38:41
【问题描述】：

我想用 jquery 向数据表行内的 commandButtons 添加一个点击功能，这个按钮显示一个对话框，我想用 javascript 构建内容。但是javascript中定义的函数甚至没有被调用。

我有这个：

<p:datatable id="tbl1">
<p:commandButton id="button1" onclick="dlg.show()">
</p:commandButton>
</p:datatable>

在我的 javascript 中

$("#form:tbl1:0:button1").click(function(){
 //...some js functionality to show on the dialog
});

任何建议将不胜感激

祝大家有个愉快的一天

【问题讨论】：

试试$("#form\\:tbl1\\:0\\:button1").click(function(){。因为在页面上如果你在javascript中不做`\`，那是不会被识别的

标签： javascript jquery jsf primefaces

【解决方案1】：

jQuery 使用CSS selector 语法来选择 HTML DOM 树中的元素。冒号 : 是 CSS 选择器语法中的一个特殊字符，表示伪选择器的开头，例如 :hover、:active、:disabled、:first-child 等。但是，您在这里使用它作为元素 ID，而不是伪选择器。在这种情况下，您需要使用（双）反斜杠转义冒号。

$("#form\\:tbl1\\:0\\:button1")

或者，使用纯 JS document.getElementById() 并将其传递给 jQuery，它只需要纯元素 ID，而不是 CSS 选择器，因此您不需要转义它：

$(document.getElementById("form:tbl1:0:button1"))

或者更好的是，给它一个样式类：

<p:commandButton ... styleClass="some-button" />

这样你就可以做

$(".some-button")

并且能够在其他按钮上重复使用它。

【讨论】：