title: Add the same click listener to multiple element
body: <p>i'm developing a web site using Javascript and jQuery for the first times. I created a map using Leaftlet library and Leaftlet clustering plugin. On that map i put about 300 markers that i get from a JSON file.
  Then i bind a popup (info window) to every marker and then i add a click listener to the popup, so if an user click on it, a modal window is shown.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>function loadData(callback) {
    var xobj = new XMLHttpRequest();
    xobj.overrideMimeType("application/json");
    xobj.onreadystatechange = function () {
      if (xobj.readyState == 4 &amp;&amp; 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 &lt; 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 = "&lt;div class='info'&gt;&lt;p id='title'&gt;" + users[i].name + "&lt;/p&gt;&lt;p&gt;" + users[i].city + "&lt;/p&gt;&lt;/div&gt;";
  
      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());
      });
    });
  }
  </code></pre>
  
  <p>As you can see i add the same click listener to every marker. So the question is: it this the right way to reach my purpose? Do you know any better way to do it?
  I would put the click event listener outside the for. How to do that?</p>