jQuery 在 HTML 中工作，而不是在 JSP 中答案

【问题标题】：jQuery working on HTML, not in JSPjQuery 在 HTML 中工作，而不是在 JSP 中
【发布时间】：2014-10-29 05:25:20
【问题描述】：

我有一个虚拟键盘包（从http://mottie.github.io/Keyboard/ 获得），我正试图在我的网站上使用它。按照他们的文档，我能够让它在 HTML 页面上运行，如下所示：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
	
	<link href="css/keyboard.css" rel="stylesheet">
	<script src="js/jquery.keyboard.js" type="text/javascript"></script>
	<script>
		$(function(){
			$('#keyboard').keyboard();
		});
	</script>
<script type="text/javascript">
	window.onload = function() {
		var tfrow = document.getElementById('tfhover').rows.length;
		var tbRow = [];
		for (var i = 1; i < tfrow; i++) {
			tbRow[i] = document.getElementById('tfhover').rows[i];
			tbRow[i].onmouseover = function() {
				this.style.backgroundColor = '#ffffff';
			};
			tbRow[i].onmouseout = function() {
				this.style.backgroundColor = '#d4e3e5';
			};
		}
	};
</script>
<title>Login Page</title>
</head>
<body viewsource="no">
	<div id="wrap">
		<input id="keyboard" type="text">
	</div>
</body>
</html>

但是，当完全相同的内容位于 tomcat 服务器上具有 .jsp 扩展名（我使用 eclipse/spring 编码）的文件中时，jQuery 不起作用。我能够在 jsp 页面上运行的唯一 jQuery 功能是弹出警报。

我查看了之前的问题 here 和 here 和 here，我认为这些问题很相似，但没有找到任何帮助。

此新手感谢任何帮助！

更新：包括JSP代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@page import="java.util.*"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/security/tags"
	prefix="sec"%>
<html>
<head>
	<meta charset="utf-8">
	<link href="http://code.jquery.com/ui/1.9.0/themes/ui-darkness/jquery-ui.css" rel="stylesheet">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
	
	<link href="css/keyboard.css" rel="stylesheet">
	<script src="js/jquery.keyboard.js" type="text/javascript"></script>
	<script>
		$(function(){
			$('#keyboard').keyboard();
		});
	</script>
<script type="text/javascript">
	window.onload = function() {
		var tfrow = document.getElementById('tfhover').rows.length;
		var tbRow = [];
		for (var i = 1; i < tfrow; i++) {
			tbRow[i] = document.getElementById('tfhover').rows[i];
			tbRow[i].onmouseover = function() {
				this.style.backgroundColor = '#ffffff';
			};
			tbRow[i].onmouseout = function() {
				this.style.backgroundColor = '#d4e3e5';
			};
		}
	};
</script>
<title>Login Page</title>
</head>
<body viewsource="no">
	<div id="wrap">
		<input id="keyboard" type="text">
	</div>
</body>
</html>

【问题讨论】：

你把jsp文件放在哪里了。你把它放在WEB-INF里面了吗？
检查输出 HTML 并查看 jQuery 代码是否存在。最后的 JSP 正在创建一个要呈现的 HTML 页面，因此不需要做任何特别的事情。
@SanKrish 我已将 jsp 文件放在 web-inf/jsp 中
@dawez 输出的 html 页面有 jquery 代码。如果我查看代码源并将其另存为 .html，它会再次开始工作。
你为什么使用jquery两次，即<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

标签： jquery html jsp

【解决方案1】：

好的，我通过在脚本下添加以下内容使其工作：

    $('#username').focus();

以及输入字段用户名的命名如下：

<div id="wrap">
    <input id="keyboard" name='username' type="text">
</div>

【讨论】：

这行得通吗？这对我来说没有任何意义。您正在寻找 id 为 username 的元素，而您有一个输入 id 为 keyboard 的元素。那为什么会这样呢？