javascript - Leaflet: how to add click event listener to popup? - Stack Overflow

admin管理员组

文章数量:1356265

i'm using Leaflet library for the first time and i would add a click event listener on popup for every marker.

Here is my code:

for (var i = 0; i < users.length; i++) {
  var marker = L.marker([users[i].lat, users[i].lon], {icon: iconOff})
    .on('mouseover', function() { this.setIcon(iconOn); })
    .on('mouseout', function() { this.setIcon(iconOff); })
    .addTo(map);

  var myPopup = L.popup()
    .setContent("<div id='info'><p id='title'>" + users[i].title + "</p><p>" + users[i].addr + "</p></div>");

  marker.bindPopup(myPopup).openPopup();
}

I tried to attach a MouseEvent to popup, doing this before binding myPopup to marker:

myPopup.on('click', function() { alert("Hello"); })

But it doesn't work. I also tried to add this following jQuery code (i'm working on Bootstrap and clicking on popup has to show a modal):

  $("#info").click(function() {
    $("#userTitle").html(users[i].title).html();
    $("#userAddr").html(users[i].addr).html();
    $("#userDesc").html(users[i].desc).html();

    $("#userDetails").modal("show");
  });

Here is the HTML code:

<?php
  $title = "Map";
  $scriptsH = array('.7.3/leaflet.js', 'js/showmap.js');
  require_once('header.php');
?>
    <div class="cointainer">
        <div id="map-canvas">
        </div>
  </div>
  <div class="modal fade" id="userDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="userTitle"></h4>
      </div>
      <div class="modal-body">
          <p id="userDesc"></p>
          <p id="userAddr"></p>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Chiudi</button>
    </div>
      </div>
    </div>
  </div>
<?php
  require_once('footer.php');
?>

But it just works on first marker with popup already opened.

Do you know any workaround or just the right way to do that?

i'm using Leaflet library for the first time and i would add a click event listener on popup for every marker.

Here is my code:

for (var i = 0; i < users.length; i++) {
  var marker = L.marker([users[i].lat, users[i].lon], {icon: iconOff})
    .on('mouseover', function() { this.setIcon(iconOn); })
    .on('mouseout', function() { this.setIcon(iconOff); })
    .addTo(map);

  var myPopup = L.popup()
    .setContent("<div id='info'><p id='title'>" + users[i].title + "</p><p>" + users[i].addr + "</p></div>");

  marker.bindPopup(myPopup).openPopup();
}

I tried to attach a MouseEvent to popup, doing this before binding myPopup to marker:

myPopup.on('click', function() { alert("Hello"); })

But it doesn't work. I also tried to add this following jQuery code (i'm working on Bootstrap and clicking on popup has to show a modal):

  $("#info").click(function() {
    $("#userTitle").html(users[i].title).html();
    $("#userAddr").html(users[i].addr).html();
    $("#userDesc").html(users[i].desc).html();

    $("#userDetails").modal("show");
  });

Here is the HTML code:

<?php
  $title = "Map";
  $scriptsH = array('http://cdn.leafletjs./leaflet-0.7.3/leaflet.js', 'js/showmap.js');
  require_once('header.php');
?>
    <div class="cointainer">
        <div id="map-canvas">
        </div>
  </div>
  <div class="modal fade" id="userDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="userTitle"></h4>
      </div>
      <div class="modal-body">
          <p id="userDesc"></p>
          <p id="userAddr"></p>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Chiudi</button>
    </div>
      </div>
    </div>
  </div>
<?php
  require_once('footer.php');
?>

But it just works on first marker with popup already opened.

Do you know any workaround or just the right way to do that?

• javascript
• jquery
• popup
• click
• leaflet

Share Improve this question Follow edited May 12, 2015 at 13:36 smartmouse asked May 12, 2015 at 12:00 smartmousesmartmouse 14.4k3535 gold badges106106 silver badges179179 bronze badges 10

• Can we see the exact code? – Akshay Khandelwal Commented May 12, 2015 at 12:03
• i don't think Leaflet Popup supports any events – Vigneswaran Marimuthu Commented May 12, 2015 at 12:10
• @akshay: what do you need? – smartmouse Commented May 12, 2015 at 13:18
• I need to see your html code along with the javascript that you have already posted here – Akshay Khandelwal Commented May 12, 2015 at 13:19
• @AkshayKhandelwal: I edited my question, please have a look. – smartmouse Commented May 12, 2015 at 13:36

 |  Show 5 more ments

2 Answers 2

Sorted by: Reset to default 3

Found final workaround! It works:

Here is my updated code:

for (var i = 0; i < users.length; i++) {
    (function (user) {
        var marker = L.marker([users[i].lat, users[i].lon], {icon: iconOff})
            .on('mouseover', function() { this.setIcon(iconOn); })
            .on('mouseout', function() { this.setIcon(iconOff); })
            .addTo(map);

        var myPopup = L.DomUtil.create('div', 'infoWindow');
        myPopup.innerHTML = "<div id='info'><p id='title'>" + users[i].title + "</p><p>" + users[i].addr + "</p></div>";

            marker.bindPopup(myPopup);

        $('#info', myPopup).on('click', function() {
            $("#userTitle").html(users[i].title).html();
            $("#userAddr").html(users[i].addr).html();
            $("#userDesc").html(users[i].desc).html();

            $("#userDetails").modal("show");
        });
    })(users[i]);
}

As you can see i create the content of the popup using L.DomUtil (DOM element) instead of L.Popup (string) for creating content for the popup. In addition, in my case i added an anonymous function to handle data from JSON.

I got inspired by this link

Another possible way is to bind the event listener to the elements of the popup.

For example:

    var popup = L.popup({offset   : new L.Point(0,-24), 
                         className: 'some-class'})
                             .setLatLng(latlng)
                             .setContent(content)
                             .openOn(map);

    // can access popup._container or popup.contentNode
    $(popup._closeButton).one('click', function(e){
        //do something
    });

本文标签： javascriptLeaflet how to add click event listener to popupStack Overflow