单击传单弹出窗口内的链接并执行Javascript

我已经准备好了一张传单地图。它在地图上覆盖一系列多边形（通过GeoJSON），并将弹出窗口附加到每个多边形。每个弹出窗口都显示有关该多边形的信息

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

我无法让脚本通过正常的jQuery/Javascript点击事件捕捉到对链接的点击。以下是我所说的正常（以下情况不起作用）：

本部分内容如下。制作时，它会在每个多边形上运行，单击多边形时会正确弹出。它确实显示了链接，只是不会在单击时运行上面的代码

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

var popupContent=“基本信息…”+“”；
layer.bindPopup（弹出内容）；

---

下面是一个JSFIDLE示例，虽然形式简单得多

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

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

您可以做的是预构造链接，附加处理程序，然后将其传递给

bindpoop

方法

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

var link=$（''）。单击（函数（）{
警报（“测试”）；
})[0];
marker.bindpoop（链接）；

下面是一个演示：

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

// 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]);

//创建一个元素来保存所有文本和标记
变量容器=$（''）；
//将容器本身及其内容的所有事件处理委托给容器
container.on（'click'，'.smallPolygonLink'，function（）{
...
});
//使用您喜欢的方法，将您想要的任何内容插入容器中
html（“这是一个链接：.”）；
container.append（$（''）.text（''：'））
//将容器插入弹出窗口
marker.bindpoop（容器[0]）；

下面是一个演示：

---

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

您可以使用jQuery选择

画布

元素，但必须在画布中使用它自己的方法。一个好的开始是。

虽然弹出内容包装器阻止事件传播，但弹出内部标记中的事件传播得很好。当事件显示在地图上（并且已成为DOM的一部分）时，可以向弹出式元素添加事件。只需关注传单事件

popupon

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");
  });
});

这对我来说很有魅力。如果弹出窗口中没有

'a.smallPolygonLink'

，则上述代码不会执行任何操作。 此代码在每次启动弹出窗口时运行。但是，您不必担心它会将多个处理程序附加到一个元素，因为当弹出窗口关闭时，DOM节点会被丢弃

有一种更通用的方法可以做到这一点。但是，它涉及

eval（）

使用风险自担。但是，当Ajax加载包含JS的部分页面时，您也会面临同样的风险，因此为了启发您，我将介绍“在传单弹出窗口中执行JS”：

map.on（'popupopen'，function（）{
var cont=document.getElementsByClassName（'shopper-popup-content'）[0]；
var lst=cont.getElementsByTagName（'script'）；
对于（var i=0；i我遇到了这个问题，尝试了上面的解决方案。但它对我不起作用。找到了以下非常基本的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');
});

//将标记添加到地图
var my_marker=newl.marker（[51.2323,4.1231]，{icon:my_icon}）；
var popup=L.popup（）.setContent（“”）；
my_marker.addTo（map.bindpoop）（弹出窗口）；
//后来
jQuery（“body”）.on（'click'，'a.click'，函数（e）{
e、 预防默认值（）；
警报（“点击”）；
});
您可以检查
弹出窗口
对象的内部属性，包括
\u包装器
等

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);
    }
}`

这就是我在mapbox官方网站上找到的：这条评论解释了为什么我们说
$（“#map”）
而不是
$（“#mybutton”）

var marker=L.marker（[43.6475，-79.3838]{
图标：L.mapbox.marker.icon({
“标记颜色”：“9c89cc”
})
})
.bindpoop（‘打招呼’）
.addTo（地图）；
//我们放在bindPopup中的HTML还不存在，所以我们不能只说
//$（“#mybutton”）。相反，我们监听map元素上的单击事件，一旦创建并有人单击它，该事件将从工具提示中弹出。
$（'#map'）。on（'click'，'.trigger'，function（）{
警报（'Hello from Toronto！'）；}）；
mapbox JavaScript库有一个事件：

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

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

bindpoop（'Say hi'）；
地址（地图）；
$（'#map'）。on（'click'，'.trigger'，function（）{
警报（“你好，来自多伦多！”）；
});

如何修改此选项以添加不可单击的文本或内容？例如，姓名：xxxx，年龄：xxxx，单击链接以了解更多详细信息。仅可单击“链接”一词。此外，[0]part do？我在jquery click api中找不到任何引用。@Josh只是在可单击的元素中添加了其他元素。下面是一个演示：
[0]
部分只是从jquery集合中获取DOM节点，因为传单接受标准DOM节点，但不接受jquery集合。太棒了。我将其更改为
.html（）
而不是
.text（）
，这样可以显示一些html格式，但在其他情况下这是完美的。谢谢。这里肯定是最好的答案-无需解决：-）是的，这应该是最好的答案。很好的解决方案！问题是每次打开弹出窗口时都要附加事件处理程序，这现在效率很低，而且在插入具有多个处理程序的更复杂结构时就不可行。理想的方法是将事件处理委托给
// 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');
});

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);
    }
}`

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!');});

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

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