Buttons inside multiple leaflet popups are not triggered on click

Skip to first unread message


Jul 19, 2022, 7:55:47 AMJul 19
to Leaflet
My leaflet map cointains multiple markers with popups. Each popup has an img element that can be clicked. In the maps that contain only one marker the code works correctly. However, when the map contains multiple markers, the clicks are detected when we click on another map. 
Example demonstration:
1). Map A contains only one marker, map B contains 7 markers.
2). The click on the img element in the popup on map A is detected.
3). The clicks on multiple (for example 6) img elements in the popups on map B are NOT detected.
4). The click on the img element in popup on map A is detected, as well as the previous 6 from map B.
The code is shown bellow:

onEachFeature: function (feature, layer) {
    centerLink+=feature.geometry.coordinates[1]+', '+feature.geometry.coordinates[0]+'/';
    if ((typeof onFeatureClick == 'function') && feature.enableAction && feature.id) {
          'click', function (e) {
                   onFeatureClick([{name: "featureId", value: feature.id}]);

     if (feature.title) {
             var content ='<img id="image" class="img"/>';
             layer.bindPopup(feature.title+content).on('popupopen', function () {
                  document.getElementById("image").addEventListener('click', (e) => {

                   'mouseover', function (e) {

Example of the map with one marker is shown in the image.example.png

Reply all
Reply to author
0 new messages