Question

.load（）仅适用于来自服务器的文件，因此稍后我会将其放在服务器上

编辑：此代码适用于Firefox，但不适用于Chrome

我一直在尝试使用ajax在选择一个选项后加载网页，但脚本似乎甚至没有加载

这是脚本+ html：

<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="DaVinciRace.css" />
	<title> Da Vinci Race 2014-2015 </title>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>
	
</head>

<body style="background:#f2f2f2;">

<div id="logo">
	<img src="Resources\DVRLogo.png"/>
	<!-- <p class="text">Da Vinci Race</p> -->
</div>

<div id="options" style="background:#0c0c0c; float:right;">
	<div class="menu">
		<div class="chronometre" ></div>
	</div>
</div>



<div id="DVRChrono">

</div>

<script>
	$(document).ready(function(){
		$("#options").on("click", ".chronometre", function() {
			$( "#DVRChrono" ).load( "Chronometre.html" );
		})
	});

</script>

</body>

</html>

文档“Chronometre.html”与此html页面位于同一文件夹中

我觉得我错过了一些显而易见的东西但却无法为我的生活找出它是什么

Answer 1

试试这个：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>

<script>
(function($){    
  $("#options").on("click", ".chronometre", function() {
    $( "#DVRChrono" ).load( "Chronometre.html" );
  })
})(jQuery)
</script>

Answer 2

这不是添加点击处理程序：

$("#options").on("click", ".chronometre", function() {
    // code
});

因为它在之前执行，所以页面上存在#options元素。代码执行没有错误，jQuery选择器根本没有找到任何东西。因此，没有可以附加处理程序的元素。

您可以通过将代码移动到页面末尾或将其包装在document.ready处理程序中来解决此问题：

$(function() { $("#options").on("click", ".chronometre", function() { $( "#DVRChrono" ).load( "Chronometre.html" ); }); });

另外，您的script代码已损坏。每个代码都应包含src 或内容，但不能同时包含两者。将它们分开：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> // your code </script>

Ajax .load（）函数不起作用

2 个答案: