Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

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.

share|improve this question
    
    
So the original cross-posting was not a good idea. But now that it is done, and both have answers (though the stackoverflow is the actual answer), what's the protocol? I can't delete this question as it has an answer already. –  Josh Sep 18 '13 at 13:56
add comment

2 Answers

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");
});
share|improve this answer
1  
That doesn't seem to work. Here's a simpler version in JSFiddle that illustrates. jsfiddle.net/2XfVc –  Josh Nov 30 '12 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. –  Snorfalorpagus Feb 3 '13 at 15:28
add comment

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] );
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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