Google Maps Popover点击事件会多次触发

Question

I have a google map with markers. Each marker when clicked, shows an infowindow. Inside the infowindow is a button to add some data to a queue. on the first click of an add to queue button, it fires once, click a second button it fires twice, click a third and it fires three times and so on.

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

HELP! Thank you :)

Answer 1

If the button that is being clicked is inside the marker the click event could be propagating up to the marker, which then adds another click event to the button. Hence the 1x, 2x, 3x, 4x firing pattern.

Try adding a stop propagation function.

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

Answer 2

What your code do is: every time there is a click event on the marker, your code will register another click event handler on the body tag. You should move it out side the

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

That way you register only one click handler on body tag

Answer 3

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

This worked for me