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

Question

我有一张正在运行的传单 map 。它在 map 上覆盖一系列多边形(通过 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

每次打开弹出窗口时，弹出窗口内的链接元素都是根据您的标记动态生成的。这意味着当您尝试将处理程序绑定(bind)到它时，该链接不存在。

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

您可以做的是预构建链接，附加处理程序，然后将其传递给 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/

参见 this Git issue有关传单弹出窗口中事件传播的更多信息。