Question

我第一次使用Javascript和jQuery开发网站。我使用Leaftlet库和Leaftlet集群插件创建了一个地图。在该地图上，我放置了大约300个从JSON文件中获取的标记。然后我将弹出窗口（信息窗口）绑定到每个标记，然后我向弹出窗口添加一个单击监听器，因此如果用户单击它，则会显示一个模态窗口。

这是我的代码：

function loadData(callback) {
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.onreadystatechange = function () {
    if (xobj.readyState == 4 && xobj.status == "200")
      callback(xobj.responseText);
  }
  xobj.open("GET", "getData.php", true);
  xobj.send(null);
}

window.onload = function() {
  loadData(function(response) {
    var divClone = $("#userDetails").clone();
    users = JSON.parse(response);

    var map = L.map('map-canvas');

    L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png').addTo(map);

    var markers = new L.MarkerClusterGroup({showCoverageOnHover: true, maxClusterRadius: 64});
    for (var i = 0; i < users.length; i++) {
      (function (cluster, user) {
    var marker = L.marker([users[i].lat, users[i].lon]);

    var myPopup = L.DomUtil.create('div', 'infoWindow');
    myPopup.innerHTML = "<div class='info'><p id='title'>" + users[i].name + "</p><p>" + users[i].city + "</p></div>";

    marker.bindPopup(myPopup);

    markers.addLayer(marker);

    // CLICK ON POPUP
    $(myPopup).on('click', function() {
      $("#userTitle").html(user.name).html();

      $("#userDesc").html(user.descr).html();

      $("#userAddr").html(user.city).html();

      $("#userEmail a").html(user.email).html();

      $("#userDetails").modal("show");
    });
      })(markers, users[i]); // function
    } // for cycle
    map.addLayer(markers);

    $(document).on('hidden.bs.modal', function (e) {
      $("#userDetails").replaceWith(divClone.clone());
    });
  });
}

正如您所看到的，我为每个标记添加了相同的点击监听器。所以问题是：这是达到我目的的正确方法吗？你知道更好的方法吗？我会将click事件监听器放在for之外。怎么做？

Answer 1

您只能使用以下内容绑定事件一次：

// CLICK ON POPUP
$(document).on('click', '.popupClass', function() {
    $("#userTitle").html(user.name).html();

    $("#userDesc").html(user.descr).html();

    $("#userAddr").html(user.city).html();

    $("#userEmail a").html(user.email).html();

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

只需相应地更新.popupClass

将相同的单击侦听器添加到多个元素

1 个答案: