我有两个 html main.html 和 a.html
<html>
<head>
<title> main.html </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#y").click(function()
{
$('#y1').load('a.html');
});
});
</script>
</head>
<body>
<div id="y">link1 </div>
<div id="y1">frame </div>
</body>
</html>
一个.html
<html>
<head>
<title>a.html </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function(){
$("#date").datepicker();
$("#y2").on("click",function(){
alert("clicked data in a.html");
});
});
</script>
</head>
<body>
<div id="y2"> click here to get alert </div>
<input id="date" type="text" />
</body>
</html>
当我打开 a.html 文件时，日期选择器运行良好，
但打开 main.html 文件单击“link1”将 a.html 加载到 main.html
datepicker 失败，我在 firefox 错误控制台中收到一条错误消息
>Error: TypeError: $(...).datepicker is not a function
>Source File: http://code.jquery.com/jquery-latest.js?_=1362478481277
>Line: 605
[编辑以改善我下面的问题]
现在我的 main.html
<html>
<head>
<title> main.html </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function() {
$("#y").click(function()
{
$('#y1').load('a.html');
});
$("#y4").click(function()
{
$('#y1').load('b.html');
});
});
</script>
</head>
<body>
<div id="y">link1 </div>
<div id="y4">link2 </div>
<div id="y1">frame </div>
</body>
</html>
一个.html
<html>
<head>
<title>a.html </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function(){
$("#date").datepicker();
$("#y2").on("click",function(){
alert("clicked data in a.html");
});
});
</script>
</head>
<body>
<div id="y2"> click here to get alert </div>
<input id="date" type="text" />
</body>
</html>
b.html
<html>
<head>
<title>b.html </title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(document).ready(function(){
$("#date1").datepicker();
$("#y3").on("click",function(){
alert("clicked data in b.html");
});
});
</script>
</head>
<body>
<div id="y3"> click here to get alert </div>
<input id="date1" type="text" />
</body>
</html>
最佳答案
尝试添加
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css"/>
到您的 main.html 页面
好的，阅读本教程:http://webtutsdepot.com/2009/06/13/ajax-page-loading-with-jquery/
因此，您需要在 main.html 页面中加载所有脚本文件，而在其他页面中只需要加载
*编辑更改了 main.html 和 a.html 以反射(reflect)您的问题，这可以解决您的脚本冲突问题
主文件
<html>
<head>
<title> main.html </title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#y").click(function()
{
$('#y1').load('a.html #calendar'
, function() {
$("#date").datepicker();
$("#y2").on("click",function(){
alert("clicked data in a.html");
});
});
});
$("#y4").click(function()
{
$('#y1').load('b.html #calendar'
, function() {
$("#date1").datepicker();
$("#y3").on("click",function(){
alert("clicked data in b.html");
});
});
});
});
</script>
</head>
<body>
<div id="y">link1 </div>
<div id="y4">link2 </div>
<div id="y1">frame </div>
</body>
</html>
一个.html
<html>
<head>
<title>a.html</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<link rel="stylesheet" href="/resources/demos/style.css" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
</head>
<body>
<div id='calendar'>
<div id="y2"> click here to get alert </div>
<input id="date" type="text" />
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
$("#date").datepicker();
$("#y2").on("click",function(){
alert("clicked data in a.html");
});
});
</script>
关于jquery - 日期选择器 jquery 插件无法通过 jquery 加载方法在另一个页面中工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15221238/