我最近在链接的单独html文件中构建了我的第一个jquery移动网站。按照jquery移动文档中的说明，我在第一页的head标签之间加载了所有脚本：
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script><!--needed only on map.htm-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/ladot.js"></script><!--all custom script for pages in same js file-->
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script><!--needed only on the two pages with forms that are to be validated-->
我还只加载了每个页面所需的脚本，以便在该页面的头部中运行。如果我导航到第一页然后链接到其他页面，我的所有javascript函数都可以工作;表单经过验证，输入字段根据下拉选项显示/隐藏。
问题是，如果我刷新页面或直接转到地址栏中的那个页面，这些功能都无法正常工作。在阅读jquery mobile之后，我认为如果我将脚本包含在每个页面的头部，如果用户碰巧首先通过HTTP加载该页面而不是从第一页链接到ajax，则会加载这些脚本。
我知道我可以在data-role =“page”之间包含我需要的脚本。这是最好的选择吗？这是我自定义的ladot.js脚本，我可以分成单独的js文件，在相关页面的data-role =“page”中加载必要的函数。
ladot.js：
// JavaScript Document
//-------------Javascript for map.htm -- first page that is loaded------------------------------
function initialize() {
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 14,
//center: new google.maps.LatLng( 34.05221496568917, -118.24334979057312 ),
mapTypeId: google.maps.MapTypeId.TERRAIN
});
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);
existingbikewaysMap = new google.maps.FusionTablesLayer({
query: {
select: 'geometry',
from: '5294232'
}
});
existingbikewaysMap.setMap(map);
//add the bicycle parking fusion table layer
BikeParkingMap = new google.maps.FusionTablesLayer({
query: {
select: 'Full Address',
from: '1A5fsPE8B8eJfV4jwji29sebnY1QiAVjL2pTjzOk'
}
});
BikeParkingMap.setMap(null);
toggle = function(layer) {
if (layer == 'Bike') {
if (existingbikewaysMap.getMap() == null) existingbikewaysMap.setMap(map);
else existingbikewaysMap.setMap(null);
} else if (layer == 'Park') {
if (BikeParkingMap.getMap() == null) BikeParkingMap.setMap(map);
else BikeParkingMap.setMap(null);
}
}
google.maps.event.addDomListener(document.getElementById('Bike'), 'click', function() { toggle('Bike'); });
google.maps.event.addDomListener(document.getElementById('Park'), 'click', function() { toggle('Park'); });
centerLocation = function( position ) {
map.setCenter( new google.maps.LatLng( 34.05221496568917, -118.24334979057312 ) );
}
myMarker = 0,
displayLocation = function( position ) {
// create a new LatLng object for every position update
var myLatLng = new google.maps.LatLng( position.coords.latitude, position.coords.longitude );
// build entire marker first time thru
if ( !myMarker ) {
// define our custom marker image
var image = new google.maps.MarkerImage(
'img/bluedot_retina.png',
null, // size
null, // origin
new google.maps.Point( 8, 8 ), // anchor (move to center of marker)
new google.maps.Size( 17, 17 ) // scaled size (required for Retina display icon)
);
map.setCenter( myLatLng );
// then create the new marker
myMarker = new google.maps.Marker({
flat: true,
icon: image,
map: map,
optimized: false,
position: myLatLng,
title: 'You are here',
visible: true
});
// just change marker position on subsequent passes
} else {
myMarker.setPosition( myLatLng );
}
// center map view on every pass
//map.setCenter( myLatLng );
},
handleError = function( error ) {
var errorMessage = [
'Sorry. Permission to find your location has been denied.',
'Sorry. Your position could not be determined.',
'Sorry. Timed out.'
];
alert( errorMessage[ error.code ] );
},
// cache the userAgent
//useragent = navigator.userAgent;
// allow browser to track movement
navigator.geolocation.watchPosition(
displayLocation,
centerLocation,
handleError,
{
enableHighAccuracy: true,
maximumAge: 30000,
timeout: 27000
}
);
var input = document.getElementById('target');
var searchBox = new google.maps.places.SearchBox(input);
var markers = [];
google.maps.event.addListener(searchBox, 'places_changed', function() {
var places = searchBox.getPlaces();
for (var i = 0, marker; marker = markers[i]; i++) {
marker.setMap(null);
}
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places[i]; i++) {
var image = new google.maps.MarkerImage(
'img/pin_blue.png',
new google.maps.Size(15,29),
new google.maps.Point(0,0),
new google.maps.Point(8,29)
);
var shadow = new google.maps.MarkerImage(
'img/pin_shadow.png',
new google.maps.Size(33,29),
new google.maps.Point(0,0),
new google.maps.Point(8,29)
);
var shape = {
coord: [11,1,12,2,13,3,14,4,14,5,14,6,14,7,14,8,14,9,14,10,14,11,14,12,13,13,12,14,11,15,8,16,8,17,8,18,8,19,8,20,8,21,8,22,8,23,8,24,11,25,11,26,11,27,3,27,3,26,3,25,6,24,6,23,6,22,6,21,6,20,6,19,6,18,6,17,6,16,3,15,2,14,1,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,1,3,2,2,3,1,11,1],
type: 'poly'
};
var marker = new google.maps.Marker({
map: map,
icon: image,
shadow: shadow,
shape: shape,
title: place.name,
position: place.geometry.location
});
markers.push(marker);
bounds.extend(place.geometry.location);
}
map.fitBounds(bounds);
});
google.maps.event.addListener(map, 'bounds_changed', function() {
//var bounds = map.getBounds();
searchBox.bindTo('bounds', map);
});
}
//Function that toggles CSS styles so that navbar buttons go on and off
$(function() {
$("#nav1,#nav2,#nav3").off('click').on('click', function() {
setTimeout(function() {
$(this).removeClass('');
}, 500);
$(this).toggleClass("custom-btn-active");
});
});
//Function to toggle search div
$(function() {
$("#Find").click(function(){
$("#searchfield").slideToggle();
});
});
google.maps.event.addDomListener(window, 'load', initialize);
//-------------Javascript for bss-request.htm--------------------------------------------
//Function that controls form validation errors for BSS form
$(document).on("#bss-request", "pagecreate", function() {
$("#bssForm").validate({
rules: {
name: "required",
phone: {
required: false,
minlength: 10
},
email: {
required: true,
email: true
},
problem: "required",
description: {
required: true,
minlength: 15
},
location: {
required: true,
minlength: 15
}
},
messages: {
name: "Please enter your name",
phone: {
minlength: "Please enter at least 10 digits"
},
email: "Please enter a valid email address",
problem: "Please select a problem",
description: {
required: "Please describe the problem",
minlength: "We need a longer description"
},
location: {
required: "Please tell us where the problem is",
minlength: "We need a more detailed location"
},
},
errorPlacement: function(error, element) {
if (element.attr("name") === "problem") {
error.insertAfter($("#problem").parent());
} else {
error.insertAfter(element);
}
}
});
});
//-------------Javascript for bike-rack-request.htm--------------------------------------------
//Function that controls form validation errors for Bike rack request form
$(document).delegate("#bike-rack-request", "pagecreate", function() {
$("#rackForm").validate({
rules: {
Business_Name: "required",
Contact_Name: "required",
Phone_Number: {
required: false,
minlength: 10
},
email: {
required: true,
email: true
},
Street_Address: {
required: true,
minlength: 8
},
Number_of_Racks: "required",
description: {
required: false,
},
},
messages: {
Business_Name: "Which business needs a bike rack?",
Contact_Name: "Please enter your name",
Phone_Number: {
minlength: "Please enter at least 10 digits"
},
email: "Please enter a valid email address",
Street_Address: {
required: "Where to install or repair the rack(s)?",
minlength: "We need a more detailed location"
},
Number_of_Racks: "How many racks you are requesting?"
},
errorPlacement: function(error, element) {
if (element.attr("name") === "Number_of_Racks") {
error.insertAfter($("#Number_of_Racks").parent());
} else {
error.insertAfter(element);
}
}
});
//Function that shows/hides form fields
$('#Number_of_Racks').change(function() {
var value = $(this).val();
if (value in {'Seperating from concrete':1,
'Missing footing screws':1,
'Rack has been cut':1,
'Rack has been smashed':1,
'Rack was stolen':1,
'Other damage':1}) {
$('#damage_div').slideDown('');
}
else {
$('#damage_div').slideUp('');
}
});
});
//-------------Javascript that runs on all pages--------------------------------------------
//Function that sets sticky footer
$(document).on( 'pagebeforechange', function() {
// hide footer
$('[data-role=footer]').hide();
});
$(document).on( 'pagechange', function() {
// show footer
$('[data-role=footer]').show();
});
答案 0 :(得分：2)
通过AJAX加载页面时，Jquery mobile只会加载目标页面的主体。这意味着标题中的任何内容都将被忽略，包括脚本或样式的任何链接。因此，您需要
答案 1 :(得分：0)
我猜测问题是jquery mobile在ajax加载期间/之后无法访问窗口对象。问题在于： google.maps.event.addDomListener（窗口，'加载'，初始化）;
你不需要这个。所有这一切都是加载初始化函数。
我正在做一个简单的自动完成并删除addDomListener并从初始化函数中提取代码。请参阅下面删除的代码。这非常有效。
function initialize（）{ //已移除
var input = /** @type {HTMLInputElement} */(document.getElementById('text-basic'));
var autocomplete = new google.maps.places.Autocomplete(input);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
// Inform the user that the place was not found and return.
input.className = 'notfound';
return;
}
});
} //已删除
google.maps.event.addDomListener（this.window，'load'，initialize）; //已移除