GoogleマップPopover clickイベントが複数回発生する

Question

私はマーカー付きのGoogleマップを持っています。クリックされると、各マーカーは情報ウィンドウを表示します。 infowindowの中には、いくつかのデータをキューに追加するためのボタンがあります。 [キューに追加]ボタンの最初のクリックでは、一度起動し、2回目のボタンをクリックして2回、3回目をクリックして3回起動します。

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！ありがとうございました:)

Answer 1

クリックされたボタンがマーカの内側にある場合、クリックイベントはマーカまで伝播しており、ボタンに別のクリックイベントが追加されます。したがって、1x、2x、3x、4xの発火パターン。

ストップ伝播機能を追加してみてください。

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

Answer 2

マーカーでクリックイベントが発生するたびに、コードでbodyタグに別のクリックイベントハンドラが登録されます。あなたはbodyタグにのみワンクリックハンドラ

Answer 3

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

これはまだ複数回発射、私