Google Maps Popover點擊事件會多次觸發

Question

我有一個帶標記的谷歌地圖。 單擊時，每個標記顯示一個信息窗口。 在infowindow內部是一個向隊列添加一些數據的按鈕。 在第一次單擊添加到隊列按鈕時，它會觸發一次，單擊第二個按鈕，它會觸發兩次，單擊第三個按鈕會觸發三次，依此類推。

google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
        $('.show-compare').popover('destroy');
        infowindow.setContent('<div class="add-wrapper"><div class="show-compare" data-toggle="popover" data-placement="top" data-content="Add to compare basket">CLICK ME</div></div>);
        infowindow.setOptions({maxWidth: 200});
        infowindow.open(map, marker);

        $('body').on("click", '.show-compare', function(e) {
                e.preventDefault();
                alert();//this fires x times, only should fire once per click!!

        }
    }) (marker, i));
}

救命！ 謝謝 ：）

Answer 1

如果正在單擊的按鈕位於標記內，則單擊事件可能會傳播到標記，然后標記會向該按鈕添加另一個單擊事件。 因此1x，2x，3x，4x發射模式。

嘗試添加停止傳播功能。

$('body').on("click", '.show-compare', function(e) {
    e.preventDefault();
    e.stopPropagation();
    alert();
}

Answer 2

您的代碼所做的是：每次標記上都有單擊事件時，您的代碼將在body標記上注冊另一個單擊事件處理程序。 你應該把它移出去

google.maps.event.addListener(marker, 'click', (function(marker, i)

這樣，您只能在body標簽上注冊一個點擊處理程序

Answer 3

$('body').off("click", '.show-compare').one("click", '.show-compare', function(e) {
    e.preventDefault();
    e.stopPropagation();
    alert();
}

這對我有用