我使用 jQuery 来修改用其他 javascript 创建的 html。如果我在单击按钮时运行 jQuery，一切正常。
但是，如果我在窗口加载时运行 jQuery，它不会做任何事情。通过添加警报，它似乎在其他 javascript 完成在页面上创建 html 之前运行。在所有其他 javascript 完成后，如何让我的 jQuery 运行？
注意 - 我只做一个演示，所以在这种情况下性能和最佳实践并不是真正的问题。谢谢
更新 - 这是我的代码：
<html>
<head>
<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="../gmap3.js"></script>
<style>
body, html {
margin: 0;
padding: 0;
}
.gmap3{
margin: 20px auto;
border: 1px dashed #C0C0C0;
width: 320px;
height: 450px;
}
#panTo{
background-color: Pink;
float: left;
text-align: left;
width: 200px;
}
.find {
height: 10px;
width: 10px;
background-color: grey;
}
#start {
position: absolute;
top: 0;
right: 0;
}
#button-0 {
display: none;
}
.two {
background-color: white;
display: none;
white-space: nowrap;
z-index: 999999;
position: relative;
right: -19px;
top: -46px;
padding: 5px;
border: 1px solid black;
border-radius: 10px;
}
.no {
text-align: center;
border:1px solid grey;
position: relative;
left: -22px;
top: -2px;
background-color: white;
width: 19px;
height: 32px;
}
.active {
font-weight: bold;
}
</style>
<script type="text/javascript">
$(function(){
var points = [
[54.618017, 3.48291],
[53.618017, 2.78291],
[52.618017, 2.48291],
[51.618017, 2.28291],
[50.618017, 1.88291],
[50.218017, 1.48291],
[50.118017, 0.439453]
];
$('#test1').gmap3(
{ action: 'init',
center:{
lat:44.797916,
lng:-93.278046
},
onces: {
bounds_changed: function(){
$(this).gmap3({
action:'getBounds',
callback: function (bounds){
if (!bounds) return;
var southWest = bounds.getSouthWest(),
northEast = bounds.getNorthEast(),
lngSpan = northEast.lng() - southWest.lng(),
latSpan = northEast.lat() - southWest.lat(),
i;
for (i = 1; i < 4; i++) {
// add($(this), i, southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random());
add($(this), i, points[i][0], points[i][1]);
}
}
});
}
}
}
);
});
function add($this, i, lat, lng){
$this.gmap3(
{ action: 'addMarker',
latLng: [lat, lng],
callback: function(marker){
var $button = $('<span id="button-'+i+'"> ['+i+'] </span>');
$button
.click(function(){
$this.gmap3({
action:'panTo',
args:[marker.position]
});
})
.css('cursor','pointer');
$('#panTo').append($button);
}
},
{ action:'addOverlay',
latLng: [lat, lng],
options:{
content: '<div class="no no-'+i+'" >'+i+'<div class="two"></div></div>',
offset:{
y:-32,
x:12
}
},
events:{
mouseover: function(overlay){
// $(overlay.getDOMElement()).children().css('backgroundColor', '#0000FF');
},
mouseout: function(overlay){
// $(overlay.getDOMElement()).children().css('backgroundColor', '#00FF00');
}
}
});
}
$(document).ready(function() {
//$('#start').live("click", function() {
// $(window).load(function () {
$('#button-1').html('<p>1) Herne Hill</p>');
$('#button-2').html('<p>2) Sloane Square</p>');
$('#button-3').html('<p>3) Elephant and Castle</p>');
$('.no-1 .two').text('Herne Hill');
$('.no-2 .two').text('Sloane Square');
$('.no-3 .two').text('Elephant and Castle');
$('#button-1').live("click", function() {
$('.two').css('display','none');
$('.no-1 .two').css('display','inline-block');
$('#panTo span').removeClass('active');
$(this).addClass('active');
});
$('#button-2').live("click", function() {
$('.two').css('display','none');
$('.no-2 .two').css('display','inline-block');
$('#panTo span').removeClass('active');
$(this).addClass('active');
});
$('#button-3').live("click", function() {
$('.two').css('display','none');
$('.no-3 .two').css('display','inline-block');
$('#panTo span').removeClass('active');
$(this).addClass('active');
});
$('.no-1').live("click", function() {
$('.two').css('display','none');
$('.no-1 .two').css('display','inline-block');
$('#panTo span').removeClass('active');
$('#button-1').addClass('active');
});
$('.no-2').live("click", function() {
$('.two').css('display','none');
$('.no-2 .two').css('display','inline-block');
$('#panTo span').removeClass('active');
$('#button-2').addClass('active');
});
$('.no-3').live("click", function() {
$('.two').css('display','none');
$('.no-3 .two').css('display','inline-block');
$('#panTo span').removeClass('active');
$('#button-3').addClass('active');
});
});
</script>
<meta name="viewport" content="width=device-width">
</head>
<body>
<div id="start">start</div>
<div id="panTo"></div>
<div id="test1" class="gmap3"></div>
</body>
</html>