My aim is to access the content within a leaflet popup. Specifically, I have inserted a form with buttons inside it that I would like to interact with. However, for now, I am simply attempting to add an event to the popup itself.
$(".leaflet-popup-content-wrapper .leaflet-popup-content").click(function(e) {
alert("clicked");
});
Check out an example of a marker with a popup using LeafletJs:
<form class="popup-form">
<div class="form-group">
<label class="mb-0" for="comment">Comment:</label>
<textarea class="form-control" rows="4" class="comment">${feature.properties.note}</textarea>
</div>
<div class="d-flex">
<button type="submit" class="btn btn-outline-info btn-sm">Save</button>
<button class="delete-button btn btn-outline-danger btn-sm ml-auto">Delete</button>
</div>
</form>
Here is the code where the popup content is defined:
var points = new L.geoJson(null, {
onEachFeature: function (feature, layer) {
layer.bindPopup(feature.properties.note);
let myPopup = L.DomUtil.create('div', 'content');
content = `
<form class="popup-form">
<div class="form-group">
<label class="mb-0" for="comment">Comment:</label>
<textarea class="form-control" rows="4" class="comment">${feature.properties.id}</textarea>
</div>
<div class="d-flex">
<button type="submit" class="btn btn-outline-info btn-sm">Save</button>
<button class="delete-button btn btn-outline-danger btn-sm ml-auto">Delete</button>
</div>
</form>
`;
layer.bindPopup(content);
$('#form', myPopup).on('click', function() {
alert("form clicked")
});
I came across this post on how to catch the click event on a leaflet popup, which inspired me.
I am puzzled by the 'context' in the code example below:
var content = L.DomUtil.create('div', 'content'),
popup = L.popup().setContent(content);
L.DomEvent.addListener(content, 'click', function(event){
// do stuff
}, context);