Click link inside Leaflet Popup and do Javascript

by

The link element inside the popup is being dynamically generated from your markup each time the popup is opened. That means the link doesn’t exist when you’re trying to bind the handler to it.

The ideal approach here would be to use on to delegate event handling to the popup element or an ancestor of it. Unfortunately, the popup prevents event propagation, which is why delegating event handling to any static elements outside the popup won’t work.

What you can do is preconstruct the link, attach the handler, and then pass it to the bindPopup method.

var link = $('<a href="#" class="speciallink">TestLink</a>').click(function() {
    alert("test");
})[0];
marker.bindPopup(link);

Here is a demonstration: http://jsfiddle.net/2XfVc/7/

In general, to insert any sort of complex markup with multiple event handlers, use the folowing approach:

// Create an element to hold all your text and markup
var container = $('<div />');

// Delegate all event handling for the container itself and its contents to the container
container.on('click', '.smallPolygonLink', function() {
    ...
});

// Insert whatever you want into the container, using whichever approach you prefer
container.html("This is a link: <a href="#" class="smallPolygonLink">Click me</a>.");
container.append($('<span class="bold">').text(" :)"))

// Insert the container into the popup
marker.bindPopup(container[0]);

Here is a demo: http://jsfiddle.net/8Lnt4/

See this Git issue for more on event propagation in leaflet popups.

Leave a Comment

tech