JQuery事件侦听器未启动-Phonegp/谷歌地图
JQuery event listener not firing - Phonegp/Google Maps
我正在尝试将事件侦听器绑定到所有带有类"chatButton"的标签。我正在使用jquery选择器"$（'.chatButton'）"，但什么也没发生。我正在尝试在创建信息窗口之后绑定这个侦听器。请参阅下面的代码：
<!DOCTYPE html>
<head>
<title>Title</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link rel="stylesheet" href="css/themes/custom.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.3/jquery.mobile.structure-1.4.3.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min.js"></script>
<script src="js/config.js"></script>
<script src="js/quickblox.js"></script>
<script src="js/FileSaver.min.js"></script>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD86ZDzTPegHkzId5kaN1LHtb7_YMh9KNU">
</script>
<script>
function loadXMLDoc(filename) {
if (window.XMLHttpRequest)
{
xhttp=new XMLHttpRequest();
}
else // code for IE5 and IE6
{
xhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xhttp.open("GET",filename,false);
xhttp.send();
return xhttp.responseXML;
}
</script>
<script type="text/javascript">
$(document).ready(function () {
var location;
var lat;
var lon;
var user = window.localStorage.getItem("user");
var sports = window.localStorage.getItem("sports");
var onSuccess = function (position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
console.log(lat + ", " + lon);
window.localStorage.setItem("lat", lat);
window.localStorage.setItem("lon", lon);
$.support.cors = true;
$.post("http://www.domain.co.uk/API/location.php", { user: user, lat: lat, lon: lon }, function (data) {
initialize();
});
};
// onError Callback receives a PositionError object
//
function onError(error) {
alert('code: ' + error.code + ''n' +
'message: ' + error.message + ''n');
}
navigator.geolocation.getCurrentPosition(onSuccess, onError);
});
function downloadUrl(url,callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState === 4) {
//request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function initialize() {
var userLat = window.localStorage.getItem("lat");
var userLon = window.localStorage.getItem("lon");
var mapOptions = {
center: new google.maps.LatLng(userLat, userLon),
zoom: 12
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
drawMarkers(map);
}
function drawMarkers(map){
var url = "http://www.domain.co.uk/API/userLocations.xml"
var infoWindow = new google.maps.InfoWindow;
downloadUrl(url,function(data){
var xml=data.responseXML;
console.log("XML From Server: ", xml);
var markers = xml.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var user = markers[i].getAttribute("user");
var sports = markers[i].getAttribute("sports");
var image = {
size: new google.maps.Size(71, 132),
origin: new google.maps.Point(0, 0),
scaledSize: new google.maps.Size(71, 132)
};
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lon")));
var html = "<b>" + "Name:<br>" + user + "</b> <br>" + "Sports:<br>" + sports +"<br><br>" + "<a class='chatButton' id="+user+">Chat To User</a>";
var marker = new google.maps.Marker({
map: map,
position: point,
title: name
});
console.log(user, sports, point, html);
bindInfoWindow(marker, map, infoWindow, html);
$(".chatButton").click(function(){
console.log("Ev listener fired...");
var usr = $(this).attr('id');
window.localStorage.setItem("chatToUser", usr);
window.location("chat.html");
});
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div style="max-width:90%;max-height:90%;margin:auto;">
<div style="width:100%;">
<h1 style="text-align:center;">Heading</h1>
</div>
<div style="width:90%;margin-left:auto;margin-right:auto;">
<div id="map-canvas" style="width:100%;height:400px"></div>
<p style="text-align:center;word-wrap:normal;">Tap A User's Pin To See Their Activities and Get In Touch With Them!</p>
</div>
</div>
</body>
</html>
问题是，在初始化尚未插入到dom中的元素（chatButton）的侦听器时，可以使用live(http://api.jquery.com/live/)对于您的点击监听器，或者初始化信息窗口的domready监听器，例如：
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
google.maps.event.addListener(infoWindow, 'domready', function() {
$(".chatButton").click(function(){
console.log("Ev listener fired...");
var usr = $(this).attr('id');
window.localStorage.setItem("chatToUser", usr);
window.location("chat.html");
});
});
});
}
参考：谷歌在打开的上映射信息窗口事件
相关文章：
- 谷歌地图固定位置覆盖
- 不显示带有本地json文件数据的谷歌地图脚本
- 谷歌地图不是以HTML显示，而是在JS Fiddle上工作
- 谷歌地图标记不会显示
- 无法在JS中显示谷歌地图
- 科尔多瓦页面类应用程序中的多个谷歌地图
- 需要帮助谷歌地图方向面板在FancyBox中显示
- 在谷歌地图上获取事件的x，y坐标
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 模拟谷歌地图中的点击
- 如何知道哪个标记被谷歌地图点击了
- 谷歌地图JS API+JSON-多个标记没有显示
- 缓存谷歌地图数据
- 谷歌地图劫持了iphone's滚动(触摸事件）-如何恢复
- 在谷歌地图上绘制位置数据库
- 标记的实时更新，无需加载页面谷歌地图API V3
- 可以't计算自定义谷歌地图的js
- 谷歌地图可以't添加正确的标记ID
- 如何更改角度谷歌地图上的集群图标
- JQuery事件侦听器未启动-Phonegp/谷歌地图
