title: Leaflet: how to add click event listener to popup?
body: <p>i'm using Leaflet library for the first time and i would add a click event listener on popup for every marker.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>for (var i = 0; i &lt; users.length; i++) {
    var marker = L.marker([users[i].lat, users[i].lon], {icon: iconOff})
      .on('mouseover', function() { this.setIcon(iconOn); })
      .on('mouseout', function() { this.setIcon(iconOff); })
      .addTo(map);
  
    var myPopup = L.popup()
      .setContent("&lt;div id='info'&gt;&lt;p id='title'&gt;" + users[i].title + "&lt;/p&gt;&lt;p&gt;" + users[i].addr + "&lt;/p&gt;&lt;/div&gt;");
  
    marker.bindPopup(myPopup).openPopup();
  }
  </code></pre>
  
  <p>I tried to attach a MouseEvent to popup, doing this before binding <code>myPopup</code> to marker:</p>
  
  <pre><code>myPopup.on('click', function() { alert("Hello"); })
  </code></pre>
  
  <p>But it doesn't work. I also tried to add this following jQuery code (i'm working on Bootstrap and clicking on popup has to show a modal):</p>
  
  <pre><code>  $("#info").click(function() {
      $("#userTitle").html(users[i].title).html();
      $("#userAddr").html(users[i].addr).html();
      $("#userDesc").html(users[i].desc).html();
  
      $("#userDetails").modal("show");
    });
  </code></pre>
  
  <p>Here is the HTML code:</p>
  
  <pre><code>&lt;?php
    $title = "Map";
    $scriptsH = array('http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js', 'js/showmap.js');
    require_once('header.php');
  ?&gt;
      &lt;div class="cointainer"&gt;
          &lt;div id="map-canvas"&gt;
          &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="modal fade" id="userDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
          &lt;h4 class="modal-title" id="userTitle"&gt;&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
            &lt;p id="userDesc"&gt;&lt;/p&gt;
            &lt;p id="userAddr"&gt;&lt;/p&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-primary" data-dismiss="modal"&gt;Chiudi&lt;/button&gt;
      &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;?php
    require_once('footer.php');
  ?&gt;
  </code></pre>
  
  <p>But it just works on first marker with popup already opened.</p>
  
  <p>Do you know any workaround or just the right way to do that?</p>