how to add marker on click event in leaflet.js

Question

i want to add marker, when i click on map. but i dont know how to do it:(

by default I do not want to have a marker map

i just wrote this code:

  var mapOptions = {
        center: [17.385044, 78.486671],
        zoom: 10
    }
    var layer = new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
    var map = new L.map('mapid', mapOptions);
    map.addLayer(layer);

    var markerOptions = {
        title: "MyLocation",
        clickable: true,
        draggable: true
    }

    function onClick(e) {
        alert(this.getLatLng());
    }
    var marker = L.marker([17.385044, 78.486671], markerOptions).on('click',onClick);
    marker.addTo(map);       

Answer 1

 map.on("click", function(e){
        var mp = new L.Marker([e.latlng.lat, e.latlng.lng]).addTo(map);
        alert(mp.getLatLng());
 });

Answer 2

If you are looking to set only one marker on the map, note that you must delete the previous one.

 var marker;
 map.on('click', function (e) {
  if (marker) { // check
   map.removeLayer(marker); // remove old layers
  }
 marker = new L.Marker(e.latlng).addTo(map); // set New Layer         
 });