Leaflet- marker click event works fine but methods of the class are undefined in the callback function

by

This is a classic JavaScript mistake.

this in JavaScript does not necessarily refer to your class instance object. It is the context of the function when it is called.

You can force this context with bind, and in many libraries you can easily force it as well. In this case with Leaflet you can pass a 3rd argument to on when attaching your event listener:

// Force current `this` to be the context when `this.markerClick` is called
marker.on('click', this.markerClick, this);

With bind it would be:

marker.on('click', this.markerClick.bind(this));

And there is also the arrow function solution, which uses the context / value of this where the arrow function is defined, rather than where it will be called:

marker.on('click', (event) => this.markerClick(event));

More Related Contents:

  1. How to open javascript menu with click & close with mouse out
  2. How to get children id when I click the parent?
  3. Change background image php loop [closed]
  4. Show/hide ‘div’ using JavaScript
  5. $(document).click() not working correctly on iPhone. jquery [duplicate]
  6. Uncaught ReferenceError: function is not defined with onclick
  7. HTML tag want to add both href and onclick working
  8. Javascript onclick function is called immediately (not when clicked)?
  9. How to reference static assets within vue javascript
  10. Leaflet drawing tiles disjointly
  11. Onclick event not firing on jsfiddle.net [closed]
  12. javascript onclick event over flash object
  13. Determine timezone from latitude/longitude without using web services like Geonames.org
  14. refresh leaflet map: map container is already initialized
  15. How to completely DISABLE any MOUSE CLICK
  16. addEventListener vs onclick
  17. Storing Image Data for offline web application (client-side storage database)
  18. CSS Animation onClick
  19. javascript onclick happening on page load
  20. Change CSS properties on click
  21. How can I stop an onclick event from firing for parent element when child is clicked?
  22. Change image source with JavaScript
  23. Leaflet marker event fires at wrong time
  24. onclick() and onblur() ordering issue
  25. Attribute onclick=”function()” not functioning as intended?
  26. How to secure the JavaScript API Access Token?
  27. jquery use of bind vs on click
  28. How do you completely remove Ionic and Cordova installation from mac?
  29. Function not calling within an onclick event
  30. onclick calling hide-div function not working

Leave a Comment