Как событие клика может работать в листе bindpopup? - PullRequest
Новая
       19

Как событие клика может работать в листе bindpopup?

1 голос
/ 22 мая 2019

Я хочу создать кнопку во всплывающем окне листовки, которая при нажатии будет увеличивать местоположение точки. Я определил кнопку и ее событие в функции pointToLayer(). При нажатии кнопка не отвечает, и при проверке инструментов разработчика в веб-браузере не сообщается об ошибке. Что не так?
Код 

var controllayer = L.geoJSON(JSON.parse(response), {pointToLayer: function(feature, latlng){

 //popup information
    var str = "<h7>" + "<b>Old Control Name: </b>" + feature.properties.controlname1 + "</h7><br>";
    str += "<h7>" + "<b>New Control Name: </b>" + feature.properties.controlname2 + "</h7><hr>";
    str += "<h7>" + "<b>Northing: </b>" + feature.properties.northing + "</h7><br>";
    str += "<h7>" + "<b>Easting: </b>" + feature.properties.easting + "</h7><hr>";
    str += "<button id = 'zoomto' class = 'btn btn-primary center-block'>Zoom In</button>";

 //event for the defined button
   $("#zoomto").click(function(){
     mymap.setView([latlng.lat, latlng.lng], 17);
    });
 return L.marker(latlng).bindPopup(str);
}}).addTo(mymap);

Я определил «управляющий слой» внутри функции успеха в ajax, чтобы загрузить данные точек с сервера.
Весь раздел кода ajax выглядит так: 

$.ajax({
          url:'load_control.php',
          success:function(response){

          var controllayer = L.geoJSON(JSON.parse(response), {pointToLayer: function(feature, latlng){

              //popup information
              var str = "<h7>" + "<b>Old Control Name: </b>" + feature.properties.controlname1 + "</h7><br>";
              str += "<h7>" + "<b>New Control Name: </b>" + feature.properties.controlname2 + "</h7><hr>";
              str += "<h7>" + "<b>Northing: </b>" + feature.properties.northing + "</h7><br>";
              str += "<h7>" + "<b>Easting: </b>" + feature.properties.easting + "</h7><hr>";
              str += "<button id = 'zoomto' class = 'btn btn-primary center-block'>Zoom In</button>";

              //event for the defined button
              $("#zoomto").click(function(){
                  mymap.setView([latlng.lat, latlng.lng], 17);
              });

              return L.marker(latlng).bindPopup(str);
          }}).addTo(mymap);
          mymap.fitBounds(controllayer.getBounds());

      }
     });

1 Ответ

2 голосов
/ 22 мая 2019

Проблема заключается просто в том, что во время привязки события щелчка на странице нет элемента с идентификатором «zoomto».

Если вы связываетесь с документом и фильтруете события с помощью «»#zoomto "Селектор запросов, вы получите желаемое поведение. 

//event for the defined button
$(document).on("click","#zoomto",function() {
    mymap.setView([latlng.lat, latlng.lng], 17);
});

Как указывалось в ghybs, концепция, позволяющая событию пузыриться в дереве DOM и обрабатывать его на родительском узле DOM, который мы выбралиделегат называется делегированием события.

Эта концепция не относится к выбранной вами библиотеке (jQuery);но вот урок делегирования событий со вкусом jQuery: https://learn.jquery.com/events/event-delegation/

...