4

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.

3

2 Answers 2

3

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");
});
2
  • 1
    That doesn't seem to work. Here's a simpler version in JSFiddle that illustrates. jsfiddle.net/2XfVc
    – Josh
    Nov 30, 2012 at 7:11
  • I'm having the same issue. Calling .bind() on the element when the popup is open works (until it is closed again), but $(document).live() doesn't seem to do anything. Feb 3, 2013 at 15:28
1

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] );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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