单击事件如何在传单 bindpopup 中工作？

Question

我想在传单弹出窗口中创建一个按钮，单击该按钮会放大到该点的位置。我在 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 的成功函数中定义了 "controllayer"，以便从服务器加载点数据。
整个 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());

      }
     });

Answer 1

问题很简单，在绑定点击事件的时候，页面上没有id为"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/

单击事件如何在传单 bindpopup 中工作？

How can a click event work within a leaflet bindpopup?

ajax

jquery

geojson

leaflet