[GIS] Accessing HTML using jQuery within LeafletJS popup.

htmljqueryleaflet

So I want to add some HTML code to a Leaflet popup, but I also want to be able to to perform some jQuery functions when this HTML is clicked, like so:

.bindPopup( "<button id='clickHere'> <strong> stuff </strong> </button>" ))

But I'm unable to access this using jQuery selectors, because it's inside tags.

Is there any way to solve this problem?

Best Answer

If you want to perform a simple action, you can just use the onclick attribute, like this:

.bindPopup( "<button id='clickHere' onclick='alert(...)'> <strong> stuff </strong> </button>" ))

An other, slightly more difficult way to do this would be to catch the popupopen event and bind an action to the onclick event inside it:

map.on('popupopen', function(e) {
  var marker = e.popup._source; # Source popup
  $('#clickHere').click(function() { 
    ... 
  });
});
Related Question