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

问题描述

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

I have a leaflet map up and running. It overlays a series of polygons (via GeoJSON) on the map and attaches popups to each polygon. Each of the popups display information about that polygon.

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

I'd like to have inside the popup a link that, when clicked, runs a javascript function that pulls further smaller polygons via AJAX and shows them.

我无法让脚本通过正常的 jQuery/Javascript 点击事件捕获对链接的点击.这就是我所说的正常(以下不起作用):

I can't get the script to catch a click on the link via the normal jQuery/Javascript click events. Here's what I mean by normal (the following doesn't work):

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

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

The bindPopup part is as follows. It runs on each polygon when made and it pops up correctly on clicking on a polygon. It does show the link, just won't run the above code on click.

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/

Here's a JSFiddle illustrating the example, though in a far simpler form. http://jsfiddle.net/2XfVc/4/

推荐答案

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

The link element inside the popup is being dynamically generated from your markup each time the popup is opened. That means the link doesn't exist when you're trying to bind the handler to it.

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

The ideal approach here would be to use on to delegate event handling to the popup element or an ancestor of it. Unfortunately, the popup prevents event propagation, which is why delegating event handling to any static elements outside the popup won't work.

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

What you can do is preconstruct the link, attach the handler, and then pass it to the bindPopup method.

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

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

一般来说，要使用多个事件处理程序插入任何类型的复杂标记，请使用以下方法:

In general, to insert any sort of complex markup with multiple event handlers, use the folowing approach:

// 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 问题.

See this Git issue for more on event propagation in leaflet popups.

这篇关于单击 Leaflet Popup 中的链接并执行 Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！