Javascript无法通过调用其id来访问JSF组件

我正在尝试使用以下代码来通过引用其ID来访问Javascript中的JSF组件。 但这失败了。

JSF组件：

Javascript代码：

  function calculatePosition(idOfClicked){ alert(idOfClicked); var $element = jQuery('#'+idOfClicked); var offset = $element.offset(); alert(offset.top); }  

第一个警报工作正在推迟元素的正确id，从而certificate调用了JS函数并且已经传递了正确的id，但是它无法显示第二个警报。 只有当JSF组件的id传递给此JavaScript函数但对非JSF组件才能正常工作时，才会发生这种情况。

如何使其正常工作？

Answer 1

JSF在生成的客户端ID中添加父NamingContainer组件的ID（例如 ），其中:作为默认分隔符。 所以举个例子

   ... 

将最终生成的HTML作为

（右键单击webbrowser中的页面，然后选择“查看源”以自行查看）

然而:在CSS标识符中是非法的。 选择此选项是为了使最终用户不会在组件ID中意外地使用它，这只会导致JSF端的不可访问的参数和组件。 要使用jQuery中的CSS选择器在ID中选择具有:的元素，您需要通过反斜杠转义它或使用[id=...]属性选择器。

 var $element1 = jQuery('#' + id.replace(':', '\\:')); // or var $element2 = jQuery('[id="' + id + '"]'); 

或者，从JSF 2.0开始，您可以通过web.xml的javax.faces.SEPARATOR_CHAR上下文参数覆盖ID分隔符，该参数具有不同但CSS有效的值，例如- 。 但是，您需要注意不要在任何JSF组件ID中自己使用此角色。

作为一个完全不同的替代方案，您也可以直接传递整个HTML DOM元素。

这样你就可以做到

 function calculatePosition(element) { var $element = jQuery(element); // ... } 

没有摆弄身份证。