title: How do i set event inside setHtml on Mapbox GL JS?
body: <p>I am having problems with following example :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>mapboxgl.accessToken = 'pk.eyJ1IjoicGFwYWJ1Y2t0IiwiYSI6ImNqa2k3azQ1dzA1Zmgza3B1czIxOGhhaW4ifQ.h5OT3NaQf0vcxx3g1q1cXw';
  var map = new mapboxgl.Map({
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      zoom: 5,
      center: [-77.04, 38.907],
  });
  map.on('load', function() {
          
          map.addLayer({
          "id": "places",
          "type": "symbol",
          "source": {
              "type": "geojson",
              "data": {
                  "type": "FeatureCollection",
                  "features": [{
                      "type": "Feature",
                      "properties": {
                          "id" : 1,
                          "name" :"My Icon",
                          "icon": "theatre"
                      },
                      "geometry": {
                          "type": "Point",
                          "coordinates": [-77.038659, 38.931567]
                      }
                  }]
              }
          },
          "layout": {
              "icon-image": "ferry-15",
              "icon-allow-overlap": true
          }
      });
  
          map.on('click', 'places', function (e) {
            var coordinates = e.features[0].geometry.coordinates.slice();
            var id = e.features[0].properties.id;
            var name = e.features[0].properties.name;
        
            while (Math.abs(e.lngLat.lng - coordinates[0]) &gt; 180) {
                coordinates[0] += e.lngLat.lng &gt; coordinates[0] ? 360 : -360;
            }
  
            new mapboxgl.Popup()
                .setLngLat(coordinates)
                .setHTML("&lt;table&gt;" +
                      "&lt;tr&gt;" +
                          "&lt;td&gt;ID&lt;/td&gt;" +
                          "&lt;td&gt;:&lt;/td&gt;" +
                          "&lt;td&gt;"+id+"&lt;/td&gt;" +
                      "&lt;/tr&gt;" +
                      "&lt;tr&gt;" +
                          "&lt;td&gt;Name&lt;/td&gt;" +
                          "&lt;td&gt;:&lt;/td&gt;" +
                          "&lt;td&gt;"+name+"&lt;/td&gt;" +
                      "&lt;/tr&gt;" +
                      "&lt;/table&gt;" +
                      "&lt;button type='button' onclick='"+alert("Success")+"'&gt;This Button&lt;/button&gt;"
  
                  )
                .addTo(map);
          });
  
          map.on('mouseenter', 'places', function () {
              map.getCanvas().style.cursor = 'pointer';
          });
  
          // Change it back to a pointer when it leaves.
          map.on('mouseleave', 'places', function () {
              map.getCanvas().style.cursor = '';
          });
  
  
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;meta charset='utf-8' /&gt;
      &lt;title&gt;WEBAPP&lt;/title&gt;
      &lt;meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' /&gt;
      &lt;script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.js'&gt;&lt;/script&gt;
       &lt;script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.50.0/mapbox-gl.css' rel='stylesheet' /&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div id='map'&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>My problem is,i don't know this is bug,or i wrote the wrong code. The result i was expecting was when i clicked ship icon,and click the button called "This Button" ,an alert showed . But in this code,when i clicked ship icon,an alert shows,then popup . although i already set onclick event inside setHtml.<br>
  How do i fix this ? Thank you</p>