php include 有效，jquery .load 无效
为什么这有效：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="graph">
<? include('sites/test.php') ?>
</div>
</body>
但这不起作用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="graph">
</div>
<script>
$(document).ready(function() {
$('#graph').load('sites/test.php');
});
</script>
</body>
如果需要的话，这里是 test.php：
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="./data.js"></script>
<div id="text" style="width:500px;height:500px;position:relative;border:1px solid red;">
<div id="map_canvas" style="border:1px solid green;"></div>
</div>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-36.42,145.704);
var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.SATELLITE }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create polygon overlays from site data in file data.js included above
// Overlays are defined by a set of coordinates
// We will also be setting up an infowindow with the site name
// The infowindow will be designed to point to the 'center' of each site so we calculate the 'centroid' of each overlay in the code below as well
var overlay;
var number_of_overlays = 29;
for (var k = 0; k < number_of_overlays; k++) {
var pk = primaryKeys[k];
var verticesArray = new Array((eval("siteVertices_" + pk).length) / 2);
var m = 0;
var centroidLat = 0;
var centroidLng = 0;
for (var n = 0; n < eval("siteVertices_" + pk).length; n += 2)
{
verticesArray[m] = new google.maps.LatLng(eval("siteVertices_" + pk)[n], eval("siteVertices_" + pk)[n + 1]);
m = m + 1;
centroidLat += eval("siteVertices_" + pk)[n];
centroidLng += eval("siteVertices_" + pk)[n + 1];
}
var cent = new google.maps.LatLng(centroidLat/m, centroidLng/m);
var overlay = new google.maps.Polygon({
paths: verticesArray,
strokeColor: "#FF0000",
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: "#FF0000",
fillOpacity: 0.20,
position: cent,
map:map });
attachInfoWindow(overlay, k);
}
}
function attachInfoWindow(overlay, number) {
var infowindow = new google.maps.InfoWindow({ content: siteNames[number] });
google.maps.event.addListener(overlay, 'click', function() { infowindow.open(map, overlay); });
}
window.onload=initialize;
</script>
我真的需要使用 jquery 进行点击事件，并且不明白为什么 .load 不起作用。
MTIA！
编辑 - 对于“不工作”的模糊性表示歉意！初始化函数似乎没有呃……初始化。因此 window.onload=initialize 似乎可以使用 include 来工作，但似乎不能使用 .load 来工作。
我希望这更清楚。
Why does this work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="graph">
<? include('sites/test.php') ?>
</div>
</body>
But this does not:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<div id="graph">
</div>
<script>
$(document).ready(function() {
$('#graph').load('sites/test.php');
});
</script>
</body>
Here is test.php if required:
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="./data.js"></script>
<div id="text" style="width:500px;height:500px;position:relative;border:1px solid red;">
<div id="map_canvas" style="border:1px solid green;"></div>
</div>
<script type="text/javascript">
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-36.42,145.704);
var myOptions = { zoom: 16, center: myLatlng, mapTypeId: google.maps.MapTypeId.SATELLITE }
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create polygon overlays from site data in file data.js included above
// Overlays are defined by a set of coordinates
// We will also be setting up an infowindow with the site name
// The infowindow will be designed to point to the 'center' of each site so we calculate the 'centroid' of each overlay in the code below as well
var overlay;
var number_of_overlays = 29;
for (var k = 0; k < number_of_overlays; k++) {
var pk = primaryKeys[k];
var verticesArray = new Array((eval("siteVertices_" + pk).length) / 2);
var m = 0;
var centroidLat = 0;
var centroidLng = 0;
for (var n = 0; n < eval("siteVertices_" + pk).length; n += 2)
{
verticesArray[m] = new google.maps.LatLng(eval("siteVertices_" + pk)[n], eval("siteVertices_" + pk)[n + 1]);
m = m + 1;
centroidLat += eval("siteVertices_" + pk)[n];
centroidLng += eval("siteVertices_" + pk)[n + 1];
}
var cent = new google.maps.LatLng(centroidLat/m, centroidLng/m);
var overlay = new google.maps.Polygon({
paths: verticesArray,
strokeColor: "#FF0000",
strokeOpacity: 0.5,
strokeWeight: 1,
fillColor: "#FF0000",
fillOpacity: 0.20,
position: cent,
map:map });
attachInfoWindow(overlay, k);
}
}
function attachInfoWindow(overlay, number) {
var infowindow = new google.maps.InfoWindow({ content: siteNames[number] });
google.maps.event.addListener(overlay, 'click', function() { infowindow.open(map, overlay); });
}
window.onload=initialize;
</script>
I really need to use jquery for a click event and can't understand why .load won't work.
MTIA!
EDIT - Apologies for the vagueness of "not working"! The initialize function does not seem to uhmmm... initialize. So the window.onload=initialize appears to work using include, but does not seem to work using .load.
I hope this is clearer.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
它将在触发该事件的浏览器上执行 - 当您通过 jquery 加载时，该事件早已过去。只需将该行更改为：
that will execute on the browser triggering that event - as you load in via jquery that event has long passed. Simply change that line to:
如果您再看一下代码，就会发现
.load是在文档加载后完成的。而
include是即时的。这有很多副作用。我强烈建议您查看浏览器生成的源代码以获取更多详细信息。
一方面，您不能在正文中使用
标记。另一件事，如果 Google Maps API 使用 document.ready 功能，它将不再起作用。
If you give your code another look, the
.loadis done after the documents loads.Whereas the
includeis instantaneous.This has many side-effects. I urge you to view the browser generated source for more details.
For one thing, you can't use
<link/>tags in the body.Another thing, if Google Maps API makes use of document.ready functionality, it won't work any more.
我想说是因为 PHP 脚本将查看其工作路径以包含该路径，而 JavaScript 将查看 URL 路径。
I'd say because the PHP script will look at its working path to include the path, whilst the JavaScript will look at the URL path.