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

Я хочу создать кнопку во всплывающем окне листовки, при нажатии на которую она будет увеличиваться до местоположения точки. Я определил кнопку и ее событие в функции 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);

Я определил «controllayer» внутри функции успеха в 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());

      }
     });

где вы выполняете свой PointToLayer в своем коде?

sohaieb azaiez 22.05.2019 11:07
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
1
1
244
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема просто в том, что во время привязки события клика на странице нет элемента с идентификатором «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/

Хорошее объяснение. Просто для справки, этот метод называется «делегирование события».

ghybs 22.05.2019 12:09

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

BlueWater86 22.05.2019 13:07

Большое спасибо, это сработало отлично. Спасибо за хорошее объяснение, не могли бы вы включить ссылку на справочный материал - @BlueWater86

KalEmm 22.05.2019 19:40

Другие вопросы по теме