谷歌地图Popover点击事件多次触发

问题描述：

我有一个带有标记的谷歌地图。点击时每个标记显示一个infowindow。 infowindow内部是一个按钮，用于将一些数据添加到队列中。在第一次点击添加到队列按钮时，它会触发一次，点击第二个按钮它会触发两次，点击第三个按钮，然后触发三次，依此类推。谷歌地图Popover点击事件多次触发

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

帮助！谢谢:)

答

如果被点击的按钮位于标记内部，点击事件可能会传播到标记，然后再向该按钮添加另一个单击事件。因此，1x，2x，3x，4x点火模式。

尝试添加停止传播功能。

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

没了，还在射击多次。 – ryan

我认为Loc波纹管可能是正确的。将addListener函数外部的click监听器移动。我会让它更好一点。 $（document.ready）（$（'。show-compare'）。click（function（e）{e.preventDefault（）; alert（）}））'..并且把它移到一切之外 –

我不能移动它在外面，因为即时通讯在点击事件中使用标记数据。我需要访问我点击的标记 – ryan

答

你的代码做的是：每一个上有标记click事件的时候，你的代码将注册在身上的标签再点击一下事件处理程序。你应该将其移出侧

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

这样，你注册只有一个body标签单击处理

因为我没有足够的声望评论，我会在这里更新一个jsfiddle来证明你可以移动'$（'body'）。on（“click”，' .show-compare'，函数（e）'在google标记点击监听器之外。这里是链接@ryan http://jsfiddle.net/bm1j2508/2/。因为我太懒惰我只是做一个快速修复在通用地图上，希望你能阅读它 – Loc

答

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

这为我工作

谷歌地图Popover点击事件多次触发

相关推荐