Листовка: как добавить кнопку прослушивания событий в контекстное меню?

Question

Я использую библиотеку листов в первый раз, и я бы добавил слушателя событий щелчка по всплывающему окну для каждого маркера.

Вот мой код:

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(); 
} 

Я пытался прикрепить MouseEvent на всплывающее окно, делая это до привязки myPopup к маркеру:

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

Но это не работает. Я также попытался добавить следующий код JQuery (я работаю на Bootstrap и нажав на всплывающие окна должен показать модальное):

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

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

Вот HTML код:

<?php 
    $title = "Map"; 
    $scriptsH = array('http://cdn.leafletjs.com/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'); 
?> 

Но это просто работает над первым маркером с всплывающим окном.

Знаете ли вы обходное решение или только правильный способ сделать это?

Answer 1

Обнаружено окончательное решение! Он работает:

Вот мой обновленный код:

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]); 
} 

Как вы можете видеть, я создавать содержимое всплывающего окна с использованием L.DomUtil (DOM элемента) вместо L.Popup (строки) для создания контента для всплывающего окна. Кроме того, в моем случае я добавил анонимную функцию для обработки данных из JSON.

Я был вдохновлен этой link

Answer 2

Другим возможным способом заключается в связывании слушателя событий для элементов всплывающего окна.

Например:

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 
    });