Javascript 未捕获Google地图信息窗口中的单击事件

有了Google Map v2，我希望能够在点击GMarker信息窗口中的文本时触发一个函数

$(".foo").click(myFunction);

...

marker.openInfoWindowHtml("<span class=\"foo\">myText</span>");

$（“.foo”）。单击（myFunction）；
...
marker.openInfoWindowHtml（“myText”）；

---

不起作用。为什么不在InfoWindow中捕获事件？

据我所知，GMaps以编程方式将内容注入InfoWindow，因此除非使用事件委派，否则注入元素上的任何绑定事件处理程序都不会启动：

$(".foo").live("click", myFunction);

---

请参阅事件处理程序。

如果在调用openInfoWindowHtml之前调用了事件绑定调用（如示例中所示），则在第一次调用查找类为“foo”的元素时，跨度不在DOM中，因此未附加任何处理程序

您可以将该事件处理程序移动到openInfoWindowHtml之后调用，或者使用“实时”事件绑定，以便jQuery将使用给定的选择器监视DOM中的任何新元素

$(".foo").live('click', myFunction);

试试这个：

google.maps.event.addListener(infowindow,"**domready**",function() {
    var Cancel = document.getElementById("Cancel");
    var Ok = document.getElementById("Ok");

    google.maps.event.addDomListener(Cancel,"click",function() {
        infowindow.close();
    });

    google.maps.event.addDomListener(Ok,"click",function() {
        infowindow.close();
        console.log(position);
        codeLatLng(position);
    });
});

---

我不能让它像凯文·戈尔斯基解释的那样工作

使用jquery 1.9.1和maps api v=3.exp，可以完成以下工作：

infowindow.setContent('<a href="#" id="test">test</a>');
google.maps.event.addDomListener(infowindow, 'domready', function() {
    $('#test').click(function() {
        alert("Hello World");
    });
});

infowindow.setContent（“”）；
google.maps.event.addDomListener（infowindow，'domready'，function（）{
$（“#测试”）。单击（函数（）{
警报（“你好世界”）；
});
});

简单的解决方案，适合我。在span中使用onclick事件

<span class=\"foo\" onclick="test()">myText</span>

function test(){
alert('test OK');
}

myText
功能测试（）{
警报（“测试正常”）；
}

最简单且完整的解决方案。

信息窗口本身应仅包含一个具有唯一id的占位符div：

    <InfoWindow
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}
        onOpen={e => {
          this.onInfoWindowOpen(this.props, e);
        }}
      >
        <div id="xyz" />
      </InfoWindow>

    onInfoWindowOpen = () => {
        const button = (<button 
        onClick={
            () => {
            this.viewClinic(this.state.selectedPlace.slug)
            }
            }>
            View Details
        </button>);
        ReactDOM.render(React.Children.only(button),document.getElementById("xyz"));
        }

{
this.oninfo窗口打开（this.props，e）；
}}
>

在Mapcontainer中，定义一个OnInfo WindowOpen回调，该回调插入带有onClick事件的单个组件/容器，并将其呈现到占位符div：

    <InfoWindow
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}
        onOpen={e => {
          this.onInfoWindowOpen(this.props, e);
        }}
      >
        <div id="xyz" />
      </InfoWindow>

    onInfoWindowOpen = () => {
        const button = (<button 
        onClick={
            () => {
            this.viewClinic(this.state.selectedPlace.slug)
            }
            }>
            View Details
        </button>);
        ReactDOM.render(React.Children.only(button),document.getElementById("xyz"));
        }

OnInfo窗口打开=（）=>{
常数按钮=（{
this.viewClinic（this.state.selectedPlace.slug）
}
}>
查看详细信息
);
render（React.Children.only（按钮），document.getElementById（“xyz”）；
}

---

下面是一个工作示例：

---

另一个完整的示例映射、标记和信息窗口：

---

如果您有任何问题，请发表评论。

谢谢Kevin，这很有效。我需要在jquery mobile内部链接上放置一个点击事件，而内部页面似乎在事件触发之前加载？？只是一些需要注意的事情。