地图框.js无法将点击事件附加到弹出内容
Mapbox.js Cannot attach an onclick event to a popUp content
所以我对mapbox.js
有问题,我无法在自定义popUp
中附加onclick
事件。
正在做的是,我有一个自定义worpdress
mapbox.js
小部件,我正在动态添加自定义标记,标题和描述等。
我想在标记的属性'description:'
有一个onclick
事件。
我知道我创建mapbox.js
脚本的方式是一种不好的做法,但我需要一个快速的解决方案。
所以这里有一个php
脚本 创建一个 javascript
.
<?php
$pins = $instance['pinpoint'];
$pinsnumber;
$j = 0;
for ($i=0;$i<count($pins);$i++) {
$pinsnumber++;
}
?>
<div id="map-holder">
<div id='map'></div>
</div>
<script>
<?php $token = $instance['token'];
$latitude = $instance['latitude'];
$longitude = $instance['longitude'];
$zoom = $instance['zoom'];
$style = $instance['style'];
?>
L.mapbox.accessToken = <?php echo "'$token'";?>;
var map = L.mapbox.map('map')
.setView([<?php echo $latitude?>, <?php echo $longitude ?>], <?php echo $zoom?>);
// Use styleLayer to add a Mapbox style created in Mapbox Studio
L.mapbox.styleLayer(<?php echo "'$style'"; ?>).addTo(map);
var features = [];
var myLayer = L.mapbox.featureLayer(
{
type: 'FeatureCollection',
features: [
<?php
for($j;$j<$pinsnumber;$j++) {
echo "{
type: 'Feature',
properties: {
'marker-color': '#003460',
'marker-size': 'large',
'marker-symbol': 'circle',
'description': '<div class='"img'"><img src=" . $instance['pinpoint'][$j]['image'] . " width='"225'" height='"110'"></img></div><div class='"title-popup'"><h5>" . $instance['pinpoint'][$j]['title'] . "</h5><p>" . $instance['pinpoint'][$j]['descr'] . "</p></div><div class='"book-now btnBook'" onclick='"console.log('"Hello'")'"><a href='"" . $instance['pinpoint'][$j]['book'] . "'" target='"_blank'">Book Now ></a></div>'
},geometry: {
type: 'Point',
coordinates: [" . $instance['pinpoint'][$j]['lat'] . "," . $instance['pinpoint'][$j]['long'] . "]
}";
if ($j===$pinsnumber-1)
{
echo "}";
}
else {
echo "},";
}
}
echo "]";
?>
}).addTo(map);
map.scrollWheelZoom.disable();
</script>
因此,输出将是一系列功能。
我想要的是当用户单击.book now
我可以触发function
我尝试使用 Jquery 访问它,但它只是无法识别有一个带有.book-now
的div
,但我可以将onclick
附加到.leaflet-popup-content
,但不能附加到其中创建的html
。
只是想知道我是否需要找到一种不同的方法来解决这个问题,或者有一种我不知道的快速方法。
另外,我确实尝试在'description:'
内创建一个onclick
事件,但由于某种原因它不起作用。
L.mapbox.featureLayer
类的默认清理器方法将删除 JavaScript,因为在广义情况下,这是一个潜在的安全威胁。若要修复此示例,请禁用清理。
你的代码在哪里说
}).addTo(map);
你会写
}, { sanitizer: function(x) { return x; } }).addTo(map);
相关文章:
- 为什么js事件消失了
- 为什么我的点击事件没有使用 react js 触发
- node.js请求数据事件未在CORS ajax调用中触发
- 在D3.js中,有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- 使用onkeyup JS事件检查输入的值是否唯一
- dropdown.js中的复杂事件处理
- 使用Bacon.js发出事件
- 针对重复发生的事件,使用moment.js防止DST偏移
- d3 中是否有点击和双击事件.js力定向图
- gulpfile 引发错误事件.js:154
- Chrome 扩展程序在后台注册事件.js
- Google Analytics(分析)在淘汰赛中推送跟踪事件.js数据绑定
- 如何在木偶中使用模型事件.js
- 节点.js - 事件.js:154 抛出错误写入 EPIPE;程序崩溃
- 侦听单击事件 JS
- 使客户端在选项卡关闭节点上发送断开连接事件.js
- 如何在onkepress事件+ JS上计算sub_total和total_price输入
- 不能在onclick事件(JS)上向元素插入函数
- 附加一个错误事件js/jquery
- 捕获鼠标拖动事件JS时会发生奇怪的事情