添加相同的點擊監聽器到多個元素

我正在開發一個網站，第一次使用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()); 
    }); 
    }); 
}

正如你可以看到我相同的點擊監聽器添加到每個標記。所以問題是：這是達到我的目的的正確方法嗎？你知道有更好的方法去做嗎？我會把點擊事件監聽器放在for之外。怎麼做？

來源

2015-05-19 smartmouse

什麼是錯的呢？我的代碼工程...我正在尋找更好的方式來獲得相同的結果。我想把「點擊彈出」部分放在for循環之外...所以我可以將它用於其他目的。可以做到嗎？ – smartmouse

彈出窗口是否有獨特的類？ – Tushar

是的，你爲什麼問？ – smartmouse

可以使用綁定事件只有一次如下：

// 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相應

來源

2015-05-19 11:51:36 Tushar

爲什麼需要添加一個課程？使用.info類不一樣嗎？ – smartmouse

@smartmouse錯過了'，'新增了！ – Tushar

我看，無論如何，我仍然不知道爲什麼使用2類... – smartmouse

添加相同的點擊監聽器到多個元素

回答

相關問題