0

I used two button in my marker popup. I need to trigger a function by clicking on marker. I used the following code. Its working fine. But when I am clicking on marker it's returning an error in console

    var marker = new L.Marker(new L.LatLng(23.25, 90.56), {
        icon: myIcon,  riseOnHover: true, riseOffset: 25
    });

    map.addLayer(marker);
    var title =  "My Title";
    var subTitle = "My Sub Title";
    var analysisPharam = "Analytical Parameter";
    var popupContent = "<dl>"
        + "<dt class='popup-h1'><b>Title: </b>" + title + "</dt>"
        + "<dt class='subTitle'><b>SubTitle: </b>" + subTitle + "</dt>"
        + "<button id='layerAnalysis' class='btn btn-danger btn-xs'>Analyze</button>"
        + "<button id='popupClose' class='btn btn-danger btn-xs'>Close</button>";
    "</dl>";

    marker.bindPopup(popupContent);

    marker.on('popupopen', function(){
        L.DomEvent.on(
            $("#layerAnalysis").click(function () {
                analysisFunction(analysisPharam);
            })
        );
    });

The error in console and the myAction.js indicating error at L.DomEvent.on event

> Uncaught TypeError: Cannot read property 'trim' of undefined
>     at Object.trim (leaflet.js:5)
>     at Object.splitWords (leaflet.js:5)
>     at Object.on (leaflet.js:6)
>     at e.<anonymous> (myAction.js:487)
>     at e.fire (leaflet.js:5)
>     at e.onAdd (leaflet.js:7)
>     at e._layerAdd (leaflet.js:6)
>     at e.whenReady (leaflet.js:6)
>     at e.addLayer (leaflet.js:6)
>     at e.openPopup (leaflet.js:7)
1
    L.DomEvent.on(
        $("#layerAnalysis").click(function () {
            analysisFunction(analysisPharam);
        })
    );

That doesn't make any sense.

Check the Leaflet reference to see the parameters to L.DomEvent.on. It looks like

 on(<HTMLElement> el, <String> types, <Function> fn, <Object> context?)

So a call needs at least three parameters

  • An instance of HTMLElement
  • A space-separated string of the event names to attach to
  • A handler function

e.g.:

L.DomEvent.on(
    document.getElementById('layerAnalysis'), // HTMLElement
    'click', // String with event names
    function(ev) { console.log('clicked!') } // Handler function
);

Instead of that, you're using jQuery's click to attach an event handler:

$('#layerAnalysys')   // jquery selector for one HTML element
   .click(   // Attach a handler to the 'click' event of selected elements
     function(ev) { console.log('clicked!') } // Handler function
   );

The return of any jQuery call is a jQuery selector (so $(foo) is the same as $(foo).click(handler)). You're feeding that to L.DomEvent.on (it's wrong! it's not an instance of HTMLElement as L.DomEvent.on expects!). And obviously, as you're only passing one parameter to L.DomEvent.on, it's missing the second and third, and throws some errors around.


Read the API documentation for the libraries you're using. Know what each statement in your code should evaluate to. Don't copy-paste code blindly. Understand what it does.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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