在信息窗口上调用 setContent 后 Jquery Selector 失败

Question

我有一个在地图上打开的谷歌地图信息窗口，之后我想将事件侦听器绑定到信息窗口中的部分 html。我用 JQuery 做这个。代码类似于：

myInfoWindow.open(map);
$('#someIdInInfoWindow').bind({
    click: function() { foo1(); },
    mouseenter: function() { foo2(); }
});

不幸的是，我认为 Google 使他们的大部分库都是异步的，因此直到调用 JQuery 选择器之后才真正设置信息窗口的内容。

如何解决这个问题，以便正确设置事件处理程序？谢谢！

Answer 1

在添加侦听器之前必须等待 infoWindow 的 domready-event，此时代表 infowindow 的 HTML 元素已附加到文档并且其内容可以访问：

google.maps.event.addListener(myInfoWindow,'domready',function(){
  $('#someIdInInfoWindow').bind({
    click: function() { foo1(); },
    mouseenter: function() { foo2(); }
 });
});

这适用于通过字符串设置 infoWindow 的内容时，当您通过节点分配它时，您还可以在创建时将侦听器直接添加到特定元素：

    var content = $('<div/>')
                    .append($('<div/>',{id:'someIdInInfoWindow'})
                              .text('some text')
                              .click(foo1)
                              .mouseenter(foo2));
    myInfoWindow.setContent(content[0]);
    myInfoWindow.open(map);