【问题标题】：add event handler an element inside a info window google maps v3在信息窗口谷歌地图 v3 中添加事件处理程序元素
【发布时间】：2011-09-10 22:35:11
【问题描述】：

嗨，我正在尝试将我尝试过的事件添加到信息窗口内的按钮

var infoWindow = new google.maps.InfoWindow({
    content: '<div></br><span class="formatText">Ubicacion del Marcador: </span>' + event.latLng.toString() 
            + '</br> <input type="button" id="btnPrueba" value="prueba"/></div>'
});

google.maps.event.addListener(marker, 'click', function () {
    infoWindow.open(map, this);
    google.maps.event.addDomListener(document.getElementById('btnPrueba'), 'click', removeMarker);
});

function removeMarker(){

    alert('it works');
}

我做错了什么？或者这是另一种方法？谢谢

编辑

我也尝试过这样的 jquery，但是虽然它是由函数获取的事件，但警报没有显示。当我使用 chrome 进行调试时，它可以工作:(

google.maps.event.addListener(marker, 'click', function () {
    infoWindow.open(map, this);
    $("#btnPrueba").click(function () {

        alert('funciona');
    });
});

【问题讨论】：

@js1568 这不是错误，只是不起作用

标签： javascript jquery google-maps-api-3 infowindow

【解决方案1】：

试试按钮的“onclick”属性。

'<input type="button" id="btnPrueba" value="prueba" onclick="removeMarker()"/>'

【讨论】：

感谢好主意。它有效，但它必须是一种使其有效的方法。也谢谢你的提问
什么意思？您是否尝试将多个事件添加到单个按钮单击？
我的意思是用 jquery 或谷歌地图的监听器添加到事件处理程序
@Jorge 您是否找到了一种将事件处理程序动态添加到信息窗口中的按钮的方法？我目前正在努力解决这个问题（使用 jQuery 添加点击处理程序）。
@DarrenCook 我可以完成这项工作的唯一方法是在信息窗口的构造中添加 javascript 代码

【解决方案2】：

我的解决方法是使用较短的超时时间。

var infoWindow = ...  (as in your question) ...
infoWindow.open(...);

setTimeout(function(){
  $('#btnPrueba').on('click', function(e){
    alert("It works at last!");
    });
  },50);  //Wait for 0.05s

当我不使用 setTimeout 包装器时，它不起作用。即使 setContent() 和 open() 已经被调用。我认为这意味着创建是异步完成的。

注意：“50”是一个神奇的数字，因此可能很脆弱。

注意：使用以下方法对我也没有不工作，我仍然觉得很奇怪，无法解释：

$('#btnPrueba').on('click', document, function(e){
  alert("No luck...");
  });

【讨论】：

【解决方案3】：

调用像@DeeV 所示的全局函数确实似乎是最直接的方法（除了弄脏全局命名空间，这在最近被看不起）。 jQuery 事件委托确实可以在没有任何额外的 setTimeout 体操的情况下工作，但感觉就像一个更重的函数调用堆栈来实现相同的目标。例如

$("#myMapContainer").on("click", "#btnPrueba", function() {alert "it works";});

但是，坚持使用全局方法，除了 @DeeV 的回答之外，诀窍通常是获取一些可以在该事件处理程序中操作的上下文值：

一种方法是将参数值嵌入到函数调用中 InfoWindow 内容字符串
沿着这些线，当您生成每个标记时，按它是对数组的引用（也必须是全局的），从而促进稍后在处理程序中调用标记 API（例如 setIcon() 等）

例如JS伪代码

var myMarkerArray = [];

function removeMarker(markerIndex) {
  myMarkerArray[markerIndex].setMap(null);
}

for(int i=0; i<myLocationData.length; i++) {
  var marker = new google.maps.Marker({...});
  myMarkerArray.push(marker);
  var popup = new google.maps.InfoWindow({ content: '<input type="button" id="btnPrueba" value="prueba" onclick="removeMarker('+i+')"/>' });
}

【讨论】：