Question

我想在传单弹出窗口中创建一个按钮，单击该按钮将放大该点的位置。我已经在pointToLayer()函数中定义了按钮及其事件。单击后，该按钮不响应，并且在Web浏览器中检查开发人员工具时未报告任何错误。有什么不对吗？
代码

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

      }
     });

Answer 1

问题很简单，就是在绑定click事件时，页面上没有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中工作？

1 个答案: