Вы должны понимать, что jQuery работает с деревом HTML DOM на стороне клиента. jQuery не работает непосредственно с компонентами JSF, как вы писали в исходном коде JSF, но jQuery работает непосредственно с деревом HTML DOM, которое создается этими компонентами JSF. Вам нужно открыть страницу в webbrowser и rightclick, а затем View Source . Вы увидите, что JSF добавляет идентификатор сгенерированных входных элементов HTML с идентификаторами всех родительских компонентов NamingContainer
(таких как
,
и т. Д.) С :
как разделитель по умолчанию. Так, например,
...
закончится сгенерированным HTML как
. Вместо этого вам нужно выбрать элементы точно . Однако :
является особым символом в CSS-идентификаторах, представляющих псевдоселектор. Чтобы выбрать элемент с идентификатором :
в идентификаторе с помощью селекторов CSS в jQuery, вам нужно либо избежать его с помощью обратного слэша, либо использовать селектор атрибутов [id=...]
или просто использовать старый getElementById()
:
var $element1 = $("#foo\\:bar");
// or
var $element2 = $("[id='foo:bar']");
// or
var $element3 = $(document.getElementById("foo:bar"));
Если вы видите автогенерированную часть j_idXXX
в идентификаторе, где XXX
представляет инкрементное число, тогда вы должны указать конкретному компоненту фиксированный идентификатор, поскольку инкрементное число является динамическим и может быть изменено в зависимости от того, физическое положение в дереве.
. В качестве альтернативы вы также можете просто использовать имя класса:
, которое заканчивается в HTML как
, чтобы вы могли получить его как
var $elements = $(".someClassName");
Это позволяет лучше абстрагироваться и повторно использовать. Разумеется, эти элементы не уникальны . Только основные элементы макета, такие как заголовок, меню, содержимое и нижний колонтитул, действительно уникальны, но они, как правило, обычно не находятся в NamingContainer
.
Как еще одна альтернатива, вы могли бы просто пройти сам элемент HTML DOM в функцию:
function someFunction(element) {
var $element = $(element);
// ...
}