Question

I have created a map using LeafletJS and added a button which serve as a trigger powered via jQuery. However using .click() event listener didn’t work. So I looked at source of the page and did some experimenting.

I have discovered that almost all of the code generated via JavaScript was invisible to jQuery I could not use almost any of the map’s elements as triggers or influence them in any way (for example using .css()).

I’d like to know two things:

• Why is HTML generated via JavaScript is invisible to jQuery? And is it library(LeafletJS) specific
• Is there a way to reach HTML generated via JavaScript library using jQuery without modifying the library it self?

Answer 1

The reason you can’t touch anything in there with your jQuery is because the code in LeafletJS runs asynchronously. When you run your jQuery code, the elements in question have not yet been created.

You have to run your jQuery code in the whenReady callback.

---

If you’re just trying to listen to click events, you could use event delegation:

$(document).on('click', 'The CSS selector', function () {
    // Your code here...
});

This’ll work, but for performance reasons you should bind the event listener to the element on which you are calling LeafletJS.