問題描述
我有一張傳單地圖正在運行.它在地圖上覆蓋了一系列多邊形(通過 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模板網！