Google Maps Popover klicken Ereignis wird mehrmals ausgelöst

Question

Ich habe eine Google Map mit Markern. Jede Markierung zeigt nach dem Anklicken ein Infofenster an. Im Infofenster befindet sich eine Schaltfläche zum Hinzufügen von Daten zu einer Warteschlange. Beim ersten Klick auf die Schaltfläche "Hinzufügen zur Warteschlange" wird einmal ausgelöst, dann auf eine zweite Schaltfläche, die zweimal ausgelöst wird, auf eine dritte Schaltfläche und dann dreimal.

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

HILFE! Vielen Dank :)

Answer 1

Wenn die Schaltfläche, auf die geklickt wird, sich innerhalb der Markierung befindet, kann das Klickereignis bis zur Markierung fortgepflanzt werden, die dann der Schaltfläche ein weiteres Klickereignis hinzufügt. Daher das 1x, 2x, 3x, 4x Zündmuster.

Versuchen Sie, eine Stop-Propagation-Funktion hinzuzufügen.

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

Answer 2

Was Ihr Code tun ist: Jedes Mal, wenn ein Klick-Ereignis auf der Markierung ist, Ihr Code einer anderen Click-Ereignishandler auf dem Body-Tag registriert. Sie sollten es Seite die für mich

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

auf diese Weise Handler

Answer 3

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