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

Question

因此，我遇到mapbox.js问题，我无法在自定义popUp中附加onclick事件。

我做什么，我有一个自定义worpdressmapbox.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访问它，但它只是不承认，有一个div与.book-now，但我可以将onclick附加到.leaflet-popup-content，但不包含在其中创建的html。

我只是想知道我是否需要找到不同的方法来解决这个问题，或者有一种我不知道的快捷方式。

此外，我确实尝试在'description:'内部创建onclick事件，但由于某些原因它不起作用。

Answer 1

L.mapbox.featureLayer类的默认清除方法将删除JavaScript，因为在广泛的情况下，这是潜在的安全威胁。要修复这个例子，你需要禁用清理。

如果你的代码说

}).addTo(map); 

你会写

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