2017-06-20 104 views
1

我有一个带有标记的谷歌地图。点击时每个标记显示一个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)); 
} 

帮助!谢谢:)

回答

0

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

尝试添加停止传播功能。

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

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

+0

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

+0

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

0

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

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

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

+0

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

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

这为我工作