I have create a layergroup of markers. Now i want to listen/fire the onclick event through map.on("click"). i have tried the below code but it is not working. I am able to do the similar with the polygon layers but getting no output with layer of markers. please suggest me any way so that i can listen the click event on markers on map.

L1 = new L.LayerGroup();

for (let i = 0; i < data.length; i++) {
  var marker = L.circleMarker([data[i].Lat, data[i].Long], 100)
    .addTo(map)
    .on("mouseover", function () {
      this.setStyle({
        fillColor: "green",
        fillOpacity: 0.8,
      });
    })
    .on("mouseout", function () {
      this.setStyle({
        fillColor: "blue",
        fillOpacity: 0.2,
      });
    });

  L1.addLayer(marker);

  marker.on("click", function (e) {
    ull = document.getElementById("this3");
    ull.innerHTML = "";
    var xx = document.getElementById("clickinfo");
    xx.style.left = "0px";
    var head = document.getElementById("heading3");
    head.innerHTML = "Semi Info";

    for (const key in data[i]) {
      var element = document.createElement("li");
      element.style.background = "#cce5ff";
      element.style.margin = "5px 5px 5px 5px";
      element.innerHTML = `${key}: ${data[i][key]}`;
      ull.appendChild(element);
    }
  });
}

L1.addTo(map);

map.on("click", function (event) {
  var latlng = event.latlng;

  // L1.fireEvent("click", {
  //   latlng: latlng,
  //   layerPoint: event.layerPoint,
  //   containerPoint: event.containerPoint,
  //   originalEvent: event.originalEvent,
  //   layer: L1
  // });

  var layers = leafletPip.pointInLayer(latlng, L1);
  layers.forEach(function (layer) {
    L1.fireEvent("click", {
      latlng: latlng,
      layerPoint: event.layerPoint,
      containerPoint: event.containerPoint,
      originalEvent: event.originalEvent,
      layer: layer,
    });
  });
  // var layers= leafletPip.pointInMarker(latlng,L1);
  //   layers.forEach(function(layer){
  //       L1.fireEvent("click",{
  //         latlng: latlng,
  //       layerPoint: event.layerPoint,
  //       containerPoint: event.containerPoint,
  //       originalEvent: event.originalEvent,
  //       layer: layer
  //       });
  //   });
});