在这里，我有一个很容易解决的问题。
这是一个使用jQuery .load（）的简单易用的导航脚本。
问题是这些页面之一使用了Google Maps API ...
我从该论坛上的帖子中找到了一些代码，这些代码基本上使您可以按需加载地图。
我想知道是否在单击链接时触发loadmap（）和loadscript（）。
问题是我已经有一段时间没有使用jQuery了，完全忘记了如何菊花链函数。
所以基本上：我希望函数执行.load函数，然后调用LoadMap（）和loadScript（）...。
<html>
<head>
<title>
Overcomming Crome
</title>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.jNav').click(function(){
$('#sandbox').load($(this).attr('href'));
return false;
});
});
function loadMap() {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 6);
map.addOverlay(new GMarker(map.getCenter()));
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=loadMap";
document.body.appendChild(script);
}
</script>
</head>
<body>
<h1>
Overcomming Crome
</h1>
<li><a href="page1.html" class="jNav">Load Page 1 to Sandbox</a></li>
<li><a href="page2.html" class="jNav">Load Page 2 to Sandbox</a></li>
<li><a href="page3.html" class="jNav">Load Page 3 to Sandbox</a></li>
<div id="sandbox"></div>
</body>
这是我编辑的代码：
<html>
<head>
<title>
Overcomming Crome
</title>
<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.jNav').click(function(){
$('#sandbox').load($(this).attr('href'),function() {
loadMap();
loadScript();
});
return false;
});
});
function loadMap() {
alert("Function 1 loaded");
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 6);
map.addOverlay(new GMarker(map.getCenter()));
}
function loadScript() {
alert("Function 2 loaded");
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA-O3c-Om9OcvXMOJXreXHAxQGj0PqsCtxKvarsoS-iqLdqZSKfxS27kJqGZajBjvuzOBLizi931BUow&async=2&callback=loadMap";
document.body.appendChild(script);
}
</script>
</head>
<body>
<h1>
Overcomming Crome
</h1>
<li><a href="page1.html" class="jNav">Load Page 1 to Sandbox</a></li>
<li><a href="page2.html" class="jNav">Load Page 2 to Sandbox</a></li>
<li><a href="page3.html" class="jNav">Load Page 3 to Sandbox</a></li>
<div id="sandbox"></div>
</body>
</html>
请注意：“地图”位于page1.html上。...您能看到我要做什么吗？
最佳答案
由于您将&async=2和&callback=loadMap传递给Google Maps API，因此一旦加载，它将自动调用回调函数（即loadMap）。
$('#sandbox').load($(this).attr('href'), function() {
loadScript();
// loadMap(); <-- unnecessary; and might throw JavaScript error
});