2

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?

asked Apr 11, 2016 at 11:09

1 Answer 1

2

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() { 
 ... 
 });
});
answered Apr 11, 2016 at 11:18
2
  • Great thanks, that is perfect. One more quick question, It's possible to make onclick calls to an external JS file, right? Commented Apr 11, 2016 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). Commented Apr 11, 2016 at 11:44

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.