unable to limit leaflet marker on click event to only go off once

Question

So I have leaflet markers for 10 cities in a country created from a api ajax call. When a user clicks on one of the city markers a different ajax call is made that gets 20 nearby place Wikipedia articles and adds a marker for each place on the map. It all works fine however if the city marker is clicked again the ajax call is made again and a duplicate 20 markers are added each time the city marker is clicked. I want to prevent multiple ajax calls/duplicate markers.

I've tried

.one( "click", function() {//my code});

however the result is the following error

L.marker(...).bindPopup(...).one is not a function

I've also tried

$(this).off(event);

any help would be appreciated, thank you.

My js code:

var largeCityMarker = L.marker(new L.LatLng(cityLat, cityLng), ({icon: cityIcon}))
.bindPopup(`<div class="markerContainer"><h3>${cityName}</h3><img class="markerThumbnail" src='${cityThumbnailImg}' onerror="this.style.display='none'"><p class="markerTxtDescription">${cityInfo}</p><div id="city-link"><a href="//${cityUrl}" target="_blank">${cityText}</a></div></div>`, cityOptions)
.on('click', function() {
                        $.ajax({
                            url: "assets/php/wikiLoops.php",
                            type: 'GET',
                            dataType: 'json',
                            data: {
                                lat: this.getLatLng().lat,
                                lng: this.getLatLng().lng,
                                countryCodeA2: borderCountryCode
                            },
                        
                            success: function(result) {
      //wiki Find Nearby Places for cities
                                wikiCluster = new L.markerClusterGroup();
                                console.log(result);
                                result.data.wikiCitiesData.geonames.forEach(place => {
                                    
                                    var wikiPlaceIcon = L.icon({
                                        iconUrl: 'assets/img/icons/wikipedia.png',
                                        iconSize: [50, 50], // size of the icon
                                        popupAnchor: [0,-15]
                                        });
                                    var customOptions =
                                        {
                                        'maxWidth': '300',
                                        'className' : 'custom'
                                        };
                                        
                                    wikiPlaceName = place.title;
                                    wikiPlaceLat = place.lat;
                                    wikiPlaceLng = place.lng;
                                    wikiSummary = place.summary;
                                    wikiUrl = place.wikipediaUrl;
                                    wikiThumbnail = place.thumbnailImg;
                                    
                                    var customPopup = `<div class="card" style="width: 18rem;">
<div class="card-body"><h5 class="card-title">${wikiPlaceName}</h5><img class="img-thumbnail float-right" style="max-width: 100px" src="${wikiThumbnail}" onerror="this.style.display='none'"><p class="card-text" id="wiki-sum">${wikiSummary}</p><a href="//${wikiUrl}" target="_blank"class="card-link">Read more</a><a href="#" class="card-link"></a></div></div>`;
                                    
                                    wikiPlaceMarker = L.marker(new L.LatLng(wikiPlaceLat, wikiPlaceLng), ({icon: wikiPlaceIcon})).bindPopup(customPopup,customOptions);
                                    console.log(wikiPlaceMarker);

                                    capCityCluster.addLayer(wikiPlaceMarker);  
                                    
                                });
                            },
                            error: function(jqXHR, textStatus, errorThrown) {
                                console.log("wikiLoopPHP",textStatus, errorThrown);
                            }
                        });
                     });
    
                    largeCityCluster.addLayer(largeCityMarker);
                    
                    });

                });
                
            }
        
        },

ghybs ghybs · Accepted Answer · 2021-03-01T04:21:41

Looks like you confuse jQuery syntax with Leaflet syntax.

In Leaflet, attaching an event listener that should fire only once then be removed automatically is made using the once method:

Behaves as on(…), except the listener will only get fired once and then removed.

L.marker(latLng)
  .bindPopup(popupContent)
  .once('click', function() {});

unable to limit leaflet marker on click event to only go off once

1 Answers