Click link inside Leaflet Popup and do javascript

Question

I have a leaflet map up and running. It overlays a series of polygons (via GeoJSON) on the map and attaches popups to each polygon. Each of the popups display information about that polygon.

I'd like to have inside the popup a link that, when clicked, runs a javascript function that pulls further smaller polygons via AJAX and shows them.

I can't get the script to catch a click on the link via the normal jQuery/Javascript click events. Here's what I mean by normal (the following doesn't work):

$('a .smallPolygonLink').click(function(e){
  console.log("One of the many Small Polygon Links were Clicked");
});

The bindPopup part is as follows. It runs on each polygon when made and it pops up correctly on clicking on a polygon. It does show the link, just won't run the above code on click.

var popupContent = "Basic Information..." + '<a class="smallPolygonLink" href="#">Click here to see the smaller polygons</a>';
layer.bindPopup(popupContent);

Any help is appreciated.

Answer 1

Use .on() instead of .live() - the element is not onpage when you bind your event handler, so you'll need to bind it dynamically.

$('click', 'a .smallPolygonLink', function(e){
  console.log("One of the many Small Polygon Links were Clicked");
});

Answer 2

It looks like Leaflet muffles the events from propagating outside the popup.

One way I have gotten this to work is to trap the content in a jQuery object before binding to the popup.

var popupContent = $('<div>').html('<div>Your content</div>');
var marker.bindPopup( popupContent[0] );