点击弹出小册子里面的链接，做的Javascript(Click link inside Leafle

我有一个单张地图和运行。它覆盖了一系列在地图上的多边形（通过以GeoJSON）的并连接到弹出窗口每个多边形。每个弹出窗口中显示有关该多边形信息。

我想有弹出窗口里面，点击后，将运行通过AJAX进一步拉小多边形，并将其显示在JavaScript函数的链接。

我不能拿到剧本赶通过正常的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委托事件处理弹出元素或它的祖先。不幸的是，在弹出阻止事件的传播，这就是为什么委托事件处理弹出将无法正常工作以外的任何静态元素。

你可以做的是preconstruct链接，附加处理程序，然后将它传递给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/

见这个混帐问题更多关于事件传播的传单弹出窗口。

Answer 2:

尽管弹出式内容封装器阻止事件传播，弹出内标记内的事件传播就好了。您可以添加事件的时候都显示在地图上（并已成为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() 使用您自己的风险 。但是AJAXloading包含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!');});

Answer 4:

我碰到这个问题，尝试了上述解决方案。但它没有为我工作。发现以下非常基本的jQuery的解决方案。

// add your marker to the map
var my_marker = new L.marker([51.2323, 4.1231], {icon: my_icon});
var popup = L.popup().setContent('<a class="click" href="#">click</a>');
my_marker.addTo(map).bindPopup(popup);

// later on
jQuery("body").on('click','a.click', function(e){
  e.preventDefault();
  alert('clicked');
});

Answer 5:

您可以检查的内部性质popup对象，包括_wrapper等。

map.on('popupopen', _bindPopupClick);
map.on('popupclose', _unbindPopupClick);

var _bindPopupClick = function (e) {
    if (e.popup) {
        e.popup._wrapper.addEventListener('click', _bindPopupClickHandler);
    }
};
var _unbindPopupClick = function (e) {
    if (e.popup) {
        e.popup._wrapper.removeEventListener('click', _bindPopupClickHandler);
    }
}`

Answer 6:

您可以使用jQuery选择canvas元素，但你必须在画布中使用它自己的方法。一个体面的启动将是https://developer.mozilla.org/en/canvas_tutorial 。

Answer 7:

mapbox JavaScript库的事件：

bindPopup('<button class="trigger">Say hi</button>');
addTo(map);

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

https://www.mapbox.com/mapbox.js/example/v1.0.0/clicks-in-popups/

文章来源: Click link inside Leaflet Popup and do Javascript