不錯的Easy jQuery
[英]Nice Easy jQuery
問題描述
在這里，我有一個很容易解決的問題。
這是一個使用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上。...您能看到我要做什么嗎？
5 個解決方案
解決方案1
3 已采納 2011-03-29 11:32:46
由於您將&async=2和&callback=loadMap傳遞給Google Maps API，因此一旦加載，它將自動調用回調函數（即loadMap）。
$('#sandbox').load($(this).attr('href'), function() {
loadScript();
// loadMap(); <-- unnecessary; and might throw JavaScript error
});
解決方案2
1 2011-03-29 11:27:00
map = new GMap2(document.getElementById("map"));
您的ID映射中沒有任何元素
加載函數還具有回調，因此您可以執行以下操作：
$('#sandbox').load($(this).attr('href'), function() {
loadMap();
loadScript();
});
解決方案3
1 2011-03-29 11:27:11
您的意思是傳遞一個回調函數，例如：
$('#sandbox').load($(this).attr('href'), function() {
loadMap();
loadScript();
});
當load()完成時，這將調用loadMap()和loadScript() 。
解決方案4
1 2011-03-29 11:28:57
解決方案不是“菊花鏈式連接”功能，因為那樣仍然可以按順序執行它們。 您需要等待直到外部數據被加載，然后再調用其他方法，方法是將回調函數傳遞給load ：
$('#sandbox').load($(this).attr('href'), function() {
loadScript();
loadMap();
});
解決方案5
0 2011-03-29 11:27:20
您對load函數的調用應如下所示：
$('#sandbox').load($(this).attr('href') function(){
loadScript();
loadMap();
});
jQuery和IE播放效果不佳
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.