Mapbox.js Cannot attach an onclick event to a popUp content

Question

So I have an issue with mapbox.js, I cannot attach a onclick event inside a custom popUp.

What I am doing is, I have a custom worpdress mapbox.js widget and I am dynamically adding custom markers, title and description and etc.

I want to have a onclick event inside 'description:' property of a marker.

I am aware that the way I have created a mapbox.js script is a bad practise, but I needed a quick solution.

So here is a php script that creates a 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>

So the output would be an array of features.

What I want is to when a user click on .book now I can fire a function

I have tried accessing it with Jquery, but it just does not recognize that there is a div with a .book-now, but I can attach an onclick to a .leaflet-popup-content but not for the html that is created inside it.

I just wonder do I need to find a different approach to this problem or there is a quick way that I am not aware of.

Also, I did try to create an onclick event inside the 'description:' but it does not work for some reason.

Answer 1

The default sanitizer method for the L.mapbox.featureLayer class will remove JavaScript because, in the broad case, it's a potential security threat. To fix this example, you'd disable sanitization.

Where your code says

    }).addTo(map); 

You'd write

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