Mapbox.js无法将onclick事件附加到popUp内容

时间:2016-04-26 09:59:38

标签: javascript leaflet mapbox

因此mapbox.js存在问题,我无法在自定义onclick中附加popUp个事件。

我正在做的是,我有一个自定义worpdress mapbox.js小部件,我正在动态添加自定义标记,标题和说明等。

我希望在标记的onclick属性中包含'description:'个事件。

我知道我创建mapbox.js脚本的方式是一种不好的做法,但我需要一个快速的解决方案。

所以这是一个创建php的{​​{1}}脚本。

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

我尝试使用Jquery访问它,但它只是无法识别functiondiv,但我可以将.book-now附加到onclick但不适用于在其中创建的.leaflet-popup-content

我只是想知道我是否需要找到解决此问题的不同方法,或者有一种我不知道的快速方法。

另外,我确实尝试在html内创建onclick事件,但由于某种原因它无效。

1 个答案:

答案 0 :(得分:1)

L.mapbox.featureLayer类的默认清理程序方法将删除JavaScript,因为在广泛的情况下,它是潜在的安全威胁。要修复此示例,您需要停用清理功能。

您的代码所在的位置

    }).addTo(map); 

你要写

    }, { sanitizer: function(x) { return x; } }).addTo(map);