谷歌地图InfoWindow中的点击事件未被捕获

Question

使用Google Map v2，我想要在单击GMarker的InfoWindow中的文本时触发一个函数。

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

...

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

为什么事件在 InfoWindow 内部没有被捕获？

- user244129

Answer 1

我无法像Kevin Gorski解释的那样使它工作...

在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");
    });
});

- steven

Answer 2

如果事件绑定调用在openInfoWindowHtml之前像你的示例中一样被调用，那么当第一个调用寻找类名为"foo"的元素时，span不在DOM中，因此没有处理程序被附加。 你可以将该事件处理程序移动到openInfoWindowHtml之后调用，或者使用“live”事件绑定，以便jQuery监视具有给定选择器的任何新元素的DOM。

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

- Kevin Gorski

---

谢谢Kevin，这很有效。我需要在jQuery Mobile内部的#link上放置一个点击事件，但似乎内部页面在事件触发之前就已经加载了？？这是需要注意的事情。 - Michael Dausmann

Answer 3

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

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

查看live事件处理程序。

- karim79

Answer 4

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

infoWindow 本身应该只包含一个带有唯一 id 的占位符 div：

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

在 Mapcontainer 内部，您定义了一个 onInfoWindowOpen 回调函数，它插入一个带有 onClick 事件的单个组件/容器，并将其呈现到占位符 div 中：

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

---

这里是一个可运行的示例：

https://codesandbox.io/s/k0xrxok983

---

另一个完整的示例 MAP、Marker 和 InfoWindow：

https://codesandbox.io/s/24m1yrr4mj

如果您有任何问题，请在评论区留言。

- Farrukh Malik

Answer 5

试试这个：

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);
    });
});

- user2280969

Answer 6

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

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

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

- bCliks