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?


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() { 
| improve this answer | |
  • Great thanks, that is perfect. One more quick question, It's possible to make onclick calls to an external JS file, right? – Strobe_ Apr 11 '16 at 11:32
  • 1
    If the JS file is correctly loaded with the HTML file, yes, absolutely. You should however ensure that your external file is loaded after the main document (this often leads to trouble). – ArMoraer Apr 11 '16 at 11:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.