单击Leaflet Popup中的链接并执行Javascript

Question

我有一张传单和地图.它在地图上叠加了一系列多边形(通过GeoJSON),并将弹出窗口附加到每个多边形.每个弹出窗口显示有关该多边形的信息.

我想在弹出窗口中有一个链接,当点击它时,它运行一个javascript函数,通过AJAX拉出更小的多边形并显示它们.

我无法让脚本通过正常的jQuery/Javascript点击事件来点击链接.这是我的意思是正常(以下不起作用):

$('a .smallPolygonLink').click(function(e){
  console.log("One of the many Small Polygon Links was clicked");
});

bindPopup部分如下.它在制作时在每个多边形上运行,并在单击多边形时正确弹出.它确实显示了链接,只是不会在点击时运行上面的代码.

var popupContent = "Basic Information..." + '<a class="smallPolygonLink" href="#">Click here to see the smaller polygons</a>';
layer.bindPopup(popupContent);

这是一个JSFiddle,用一个简单的形式来说明这个例子.http://jsfiddle.net/2XfVc/4/

Answer 1

弹出窗口中的链接元素是每次打开弹出窗口时从标记动态生成的.这意味着当您尝试将处理程序绑定到它时,链接不存在.

这里理想的方法是使用on将事件处理委托给弹出元素或其祖先.不幸的是,弹出窗口阻止了事件传播,这就是为什么将事件处理委托给弹出窗口之外的任何静态元素都不起作用的原因.

您可以做的是预构建链接,附加处理程序,然后将其传递给bindPopup方法.

var link = $('<a href="#" class="speciallink">TestLink</a>').click(function() {
    alert("test");
})[0];
marker.bindPopup(link);

这是一个演示:http://jsfiddle.net/2XfVc/7/

通常,要使用多个事件处理程序插入任何类型的复杂标记,请使用以下方法:

// Create an element to hold all your text and markup
var container = $('<div />');

// Delegate all event handling for the container itself and its contents to the container
container.on('click', '.smallPolygonLink', function() {
    ...
});

// Insert whatever you want into the container, using whichever approach you prefer
container.html("This is a link: <a href='#' class='smallPolygonLink'>Click me</a>.");
container.append($('<span class="bold">').text(" :)"))

// Insert the container into the popup
marker.bindPopup(container[0]);

这是一个演示:http://jsfiddle.net/8Lnt4/

有关传单弹出窗口中事件传播的更多信息,请参阅此Git问题.

Answer 2

虽然Popup内容包装器可以防止事件传播,但弹出内部标记内的事件传播正常.您可以在弹出元素显示在地图上时添加事件(并且已成为DOM的一部分).只需注意传单活动popupopen.

var map = L.map('map').setView([51.505, 10], 7); //for example

//the .on() here is part of leaflet
map.on('popupopen', function() {  
  $('a .smallPolygonLink').click(function(e){
    console.log("One of the many Small Polygon Links was clicked");
  });
});

http://jsfiddle.net/tJGQ7/2/

这对我来说就像一个魅力.如果你的弹出窗口没有'a .smallPolygonLink'上面的代码什么也没做.此代码在弹出窗口的每次启动时运行.但是,您不必担心它会将多个处理程序附加到元素,因为当弹出窗口关闭时,DOM节点会被抛弃.

有一种更通用的方法来做到这一点.但是,它涉及到eval().使用风险由您自己承担.但是当AJAX加载包含JS的部分页面时,你会冒同样的风险,所以对于你的启发,我提出"在你的传单弹出窗口中执行JS":

map.on('popupopen', function(){
    var cont = document.getElementsByClassName('leaflet-popup-content')[0];    
    var lst = cont.getElementsByTagName('script');
    for (var i=0; i<lst.length;i++) {
       eval(lst[i].innerText)
    }
});

演示:http://jsfiddle.net/tJGQ7/4/

现在你可以写:

var popup_content = 'Testing the Link: <a href="#" class="speciallink">TestLink</a><script> $(".speciallink").on("click", function(){alert("hello from inside the popup")});</script>';

marker.bindPopup(popup_content);

Answer 3

这就是我在 mapbox 官方网站上找到的内容：使用 Mapbox.js 和 jQuery 在标记弹出窗口中创建单击事件。评论解释了为什么我们说$('#map')而不是$('#mybutton')。

var marker = L.marker([43.6475, -79.3838], {
  icon: L.mapbox.marker.icon({
    'marker-color': '#9c89cc'
  })
})
.bindPopup('<button class="trigger">Say hi</button>')
.addTo(map);
//The HTML we put in bindPopup doesn't exist yet, so we can't just say
//$('#mybutton'). Instead, we listen for click events on the map element which will bubble up from the tooltip, once it's created and someone clicks on it.

$('#map').on('click', '.trigger', function() {
alert('Hello from Toronto!');});