0
他のjavascriptで作成されたhtmlを変更するにはjQueryを使用しています。ボタンをクリックしたときにjQueryを実行させると、すべて正常に動作します。jQuery window.loadは他のjavascriptで作成されたdom要素を変更しません
しかし、私がウィンドウロードでjQueryを実行すると、何もしません。アラートを追加することによって、他のjavascriptがページ上に作成されたhtmlを完成させる前に実行されるように見えます。他のすべてのJavaScriptが終了したら、どうすればjQueryを実行できますか？
注 - デモだけを行っているので、パフォーマンスとベストプラクティスは実際にはこの問題ではありません。おかげ
はUPDATE - ここに私のコードです：あなたは後に外部コードをあなたのコードを配置した場合、外部コードが終了した後、準備ができてハンドラがキューを使用しているため
<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>
は例をお持ちですか？代わりに '$（document）.ready（）'を試しましたか？ –
他のjavascriptの後ろにコードを置くこともできますし、domが準備されるのを待つこともできます。 –
うん、実際にそれを見て、ウィンドウの読み込みとドキュメントの準備がすべて異なっているわけではありません。それでも、コード例は良いでしょう。 –