在按钮上添加事件监听器-Javascript [英] Adding Event Listener on button - Javascript
本文介绍了在按钮上添加事件监听器-Javascript的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在动态添加到Google地图信息窗口的按钮上添加事件监听器.
I'm trying to add an event listener on button added dynamically to a google maps infowindow.
var contentString = '<br></br>' +
'<button type="button" class="btn btn-success" id="btnDirection">Get direction</button> </div>' +
'<button type="button" class="btn btn-success" id="btnDiscount">Related discount</button> </div>';
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: place.geometry.location,
icon: './Google_Maps_Markers/darkgreen_MarkerK.png'
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(contentString);
infoWindow.open(map, this);
var btn = $(contentString).filter('#btnDirection');
if(btn != null){
for(var i=0; i<btn.length; i++){
btn[i].addEventListener('click', function()
{ console.log("hello") });
};
};
});
每个信息窗口上都会显示按钮,但是当我单击任何内容时都不会显示.
Buttons are displayed on each infowindow, but when I click on nothing heppens.
有人可以帮我吗?
推荐答案
The content of the infowindow is added to the DOM asynchronously, so it can't be found until the InfoWindow
"domready" event fires.
从该文档):
准备就绪 |参数:无
当包含InfoWindow的内容附加到DOM时,将引发此事件.如果您正在动态构建信息窗口内容,则可能希望监视此事件.
要将事件侦听器附加到这些按钮,请运行JQuery代码以在"domready"事件侦听器中查找它们:
To attach event listeners to those buttons, run the JQuery code to look for them in a 'domready' event listener:
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(contentString);
infoWindow.open(map, this);
// wait for the infowindow's domready event
google.maps.event.addListenerOnce(infoWindow, 'domready', function() {
// find the elements with the "btn" class and add the click listener to the one with id="btnDirection"
var btn = $(".btn").filter('#btnDirection');
if (btn != null) {
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function() {
console.log("hello")
});
};
};
});
});
代码段:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infoWindow = new google.maps.InfoWindow();
var contentString = '<div id="other"></div><br></br>' +
'<button type="button" class="btn btn-success" id="btnDirection">Get direction</button> </div>' +
'<button type="button" class="btn btn-success" id="btnDiscount">Related discount</button> </div>';
var marker = new google.maps.Marker({
map: map,
animation: google.maps.Animation.DROP,
position: map.getCenter(), // place.geometry.location,
});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(contentString);
infoWindow.open(map, this);
// wait for the infowindow's domready event
google.maps.event.addListenerOnce(infoWindow, 'domready', function() {
// find the elements with the "btn" class and add the click listener to the one with id="btnDirection"
var btn = $(".btn").filter('#btnDirection');
if (btn != null) {
for (var i = 0; i < btn.length; i++) {
btn[i].addEventListener('click', function() {
document.getElementById("other").innerHTML = "Get Direction was CLICKED";
console.log("hello")
});
};
};
});
});
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
这篇关于在按钮上添加事件监听器-Javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文