这个问题在这里已有答案：
当我有一个带有jQuery的JSP页面时，我在执行页面时没有任何问题。当我在带有JSF的Facelets页面中使用相同的代码时，jQuery似乎不起作用。它没有识别id标签的<input>属性。以下是Facelets页面的代码。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<style type="text/css">
h1 {
font-family: "Times New Roman";
font-size: 7px;
}
pre {
font-family: "Times New Roman";
font-size: 25px;
font-style: bold;
align: center;
}
</style>
<script LANGUAGE="JavaScript" SRC="jquery-1.7.min.js"></script>
<script type="text/javascript">
window.onload = function(e) {
var counter = 1
$("#description").blur(function() {
$.post("newForm.do", {
alert('inside description')
name : $("#name").val(),
description : this.value
}, function() {
});
});
$("#addQuestion")
.click(
function() {
alert('inside addquestion')
var question = '<div id="question'+counter+'">Question : <input type="text" name="questionText" value=""/>Answer Type : <input type="text" name="answerType" value=""/><input type="button" name="save" value="Save"/></div>'
$("#wrapper").append(question)
// only at this point, save button is created
$("input[name=save]").click(function(){
$.post("addQuestion.do", {
questionText : $(this).siblings("input[name=questionText]").get(0).value ,
answerType : $(this).siblings("input[name=answerType]").get(0).value
}, function() {
});
});
counter++
}
)
$("#submit").click(
function() {
$.post("submitForm.do")
});
}
</script>
</h:head>
<h:body>
<h:form>
<p:layoutUnit position="center" style="border-width:0px;">
<h1>
<font size="6">
<h:outputLabel for="createform"
value="Create New Form" /></font>
</h1>
<hr width="98%"></hr>
<table>
<tr>
<td width="30%"><pre>
<h:outputLabel for="name" value="Name of the form : " />
</pre></td>
<td align="left">
<input type="text" id="name" value="" />
</td>
</tr>
<tr>
<td width="30%"><pre>
<h:outputLabel for="desc" value="Description of the form : " />
</pre></td>
<td align="left">
<input type="text" id="description" value="" />
</td>
</tr>
<tr>
<td></td>
<td>
<div id="wrapper"></div>
<input type="button" id="addQuestion" value="Add New Question" />
<input type="button" id="submit" value="Submit" />
</td>
</tr>
</table>
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</html>
JSF和jQuery库集成的一个示例如下：JSF Bootstrap Jquery Integration
以下是需要注意的要点：
<html ... xmlns:jsf="http://xmlns.jcp.org/jsf"）有关更多信息：HTML5-Friendly Markup//<![CDATA[
$(document).ready(function() { });
//]]>使用以下命令加载脚本，以下任何一个，
<a4j:loadScript src="resource:///jquery/jquery-1.4.2.min.js" />
<a4j:loadStyle src="/jquery/jquery-ui-1.8.5.custom.css" />
<a4j:loadScript src="resource:///jquery/jquery-ui-1.8.5.custom.min.js" />