jQuery window.load不会修改使用其他JavaScript创建的dom元素
[英]jQuery window.load doesn't modify dom elements created with other javascript
问题描述
Im using jQuery to modify html that has been created with other javascript. 
我正在使用jQuery修改已使用其他JavaScript创建的html。 If I make the jQuery run when I click a button everything works fine. 如果我单击按钮时使jQuery运行，则一切正常。
However if I run the jQuery on window load it doesn't do anything. 但是，如果我在窗口加载时运行jQuery，它不会执行任何操作。 By adding an alert it seems its run before the other javascript has finished created html on the page. 通过添加警报，它似乎在其他JavaScript在页面上创建html之前运行。 How can I make my jQuery run after all other javascript has finished? 其他所有JavaScript完成后，如何使jQuery运行？
Note - im making a demo only, so performance and best practice aren't really an issue in this case. 注意-我只是制作一个演示，因此在这种情况下，性能和最佳实践并不是真正的问题。 Thanks 谢谢
UPDATE - here is my code: 更新-这是我的代码：
<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>
2 个解决方案
解决方案1
1 已采纳 2012-03-06 10:15:25
You may also delay the execution of your script to make sure other libraries have completed their initialization. 您也可以延迟脚本的执行，以确保其他库已完成其初始化。
Eg: 例如：
$(function(){
setTimeout(function(){
//your code in this block is executed after 500 ms
}, 500);
});
解决方案2
0 2012-03-06 10:12:57
If you place your code after the external code, it will run after the external code is finished, because ready handlers uses a queue. 如果外部代码后，把你的代码中，外部代码完成后，将运行，因为准备处理程序使用队列。
There is no reason to use setTimeout 没有理由使用setTimeout
$(function(){alert('external');});
//...
//...
//...
$(function(){alert('your code');});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.