title: Unable to bind to click event on Leaflet popup
body: <p>I'm using Leaflet to draw a map, within the popups I've added a link that should lead to a more detailed description, the description is separated from map and arranged into list using an accordion, so every description is hidden.</p>
  
  <p>I can use an anchor to link to the accordion content, but I need to execute some JavaScript <code>onclick</code> so I am trying to add a <code>click</code> event handler - its not working.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Leaflet Quick Start Guide Example&lt;/title&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;!--&lt;script src="http://leaflet.cloudmade.com/dist/leaflet.js"&gt;&lt;/script&gt;--&gt;
      &lt;script src="http://code.jquery.com/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
      &lt;link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" /&gt;
      &lt;!--[if lte IE 8]&gt;&lt;link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /&gt;&lt;![endif]--&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="map" style="width: 600px; height: 400px"&gt;&lt;/div&gt;
      &lt;div id="log"&gt;&lt;/div&gt;
  
      &lt;div id="map_box_text" class="status_half"&gt;
              &lt;br&gt;
              &lt;br&gt;
          &lt;p&gt;List made using JQuery UI accordion, every element is hidden, only on hover it opens, you can click on it to display on map, reverse cliking on map should aopen accordion list description (this), it's currently done using permalinks because I cannot catch click event on a or span tag.
          &lt;div class="accordion"&gt;
              &lt;h4&gt;&lt;a href="#" class="pointpopup" id="point_111_11"&gt; Ioff :: **** ***&lt;/a&gt;&lt;/h4&gt;
                  &lt;div&gt;Detailed data&lt;/div&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;h4&gt;&lt;a href="#" class="pointpopup" id="point_222_22"&gt;Us sb  :: **** ***    &lt;/a&gt;&lt;/h4&gt;
                  &lt;div&gt;Detailed data&lt;/div&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;h4&gt;&lt;a href="#" class="pointpopup" id="point_333_33"&gt;Ioff  :: **** ***&lt;/a&gt;&lt;/h4&gt;
                  &lt;div&gt;Detailed data&lt;/div&gt;
              &lt;br&gt;
              &lt;br&gt;
              &lt;h4&gt;&lt;a href="#" class="pointpopup" id="point_555_44"&gt;Us sb  :: **** ***    &lt;/a&gt;&lt;/h4&gt;
                  &lt;div&gt;Detailed data&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;script src="http://leaflet.cloudmade.com/dist/leaflet.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function(){
  
              var map = new L.Map('map', {
                  center: new L.LatLng(51.641485,-0.15362),
                  zoom: 13
              });
  
              var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/a0ead8ee56bd415896e0c7f7d22e8b6e/997/256/{z}/{x}/{y}.png',
              cloudmadeAttrib = 'Map data &amp;copy; 2011 OpenStreetMap contributors',
              cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttrib});
              map.addLayer(cloudmade);
              var point = {};
  
                  point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("&lt;a href=\"#point_111_11\" class=\"map_popup link\"&gt;Ioff&lt;/a&gt; &lt;br&gt;**** ***");
                  point["point_222_22"] = new L.Marker(new L.LatLng(51.6616333333333,-0.0528583333333333)).bindPopup("&lt;a href=\"#point_222_22\" class=\"map_popup link\"&gt;Us sb&lt;/a&gt; &lt;br&gt;**** ***");
                  point["point_333_33"] = new L.Marker(new L.LatLng(52.3910783333333,-0.696951666666667)).bindPopup("&lt;a href=\"#point_333_33\" class=\"map_popup link\"&gt;Ioff&lt;/a&gt; &lt;br&gt;**** ***");
                  point["point_555_44"] = new L.Marker(new L.LatLng(51.641485,-0.15362)).bindPopup("&lt;a href=\"#point_555_44\" class=\"map_popup link\"&gt;Us sb&lt;/a&gt; &lt;br&gt;**** ***");
  
          var points_layer = new L.LayerGroup();
  
                  points_layer.addLayer(point["point_111_11"]);
                  points_layer.addLayer(point["point_222_22"]);
                  points_layer.addLayer(point["point_333_33"]);
                  points_layer.addLayer(point["point_555_44"]);
          map.addLayer(points_layer);
  
          $('.pointpopup').click(function(){
              var pointname = this.id;
              map.setView(point[pointname].getLatLng(),15);
              point[pointname].openPopup();
          });
      });
  
      $(window).load(function(){
  
          $("body").click(function(event) {
              //console.log('event target is:' + event.target.nodeName);
              $("#log").html("clicked: " + event.target.nodeName);
          });
  
          $('.map_popup').live('click',function () {
          //$('.map_popup').click(function(){
              alert('Try to open Accordion ' + $(this).attr('href'))
              //console.log('Try to open Accordion');
          })
      })
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>you can check it on <a href="http://jsfiddle.net/M5Ntr/6/" rel="noreferrer">JS Fiddle</a></p>
  
  <p>I've reported this as a bug on github to developer of Leaflet <a href="https://github.com/CloudMade/Leaflet/issues/765" rel="noreferrer">here</a> and <a href="https://github.com/CloudMade/Leaflet/issues/767" rel="noreferrer">here</a> but he close bug replying that it's not a issue and I can use another <code>class</code> - which doesn't work.</p>
  
  <p>Edit:
  I've found some on my own too: <a href="http://jsfiddle.net/M5Ntr/12/" rel="noreferrer">http://jsfiddle.net/M5Ntr/12/</a>
  But there is still a problem, potentially there can be a 500 points, so I would like to have as less code as possible, I've tried to create function but I cannot pass variables :(</p>
  
  <p>this is working</p>
  
  <pre><code>point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("&lt;b&gt;Ioff&lt;/b&gt; &lt;br&gt;**** ***").on('click', function (e) { console.log("clicked (Try to open Accordion): " + e.target) });
  </code></pre>
  
  <p>but this is preferable (not working):</p>
  
  <pre><code>point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("&lt;b&gt;Ioff&lt;/b&gt; &lt;br&gt;**** ***").on('click', myfunction('point_111_11'));
  
  function myfunction(seclectedId){
     //do something with seclectedId
     console.log(seclectedId)
  }
  </code></pre>
  
  <p>or even</p>
  
  <pre><code>point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("&lt;b&gt;Ioff&lt;/b&gt; &lt;br&gt;**** ***").myBindFunction('point_111_11')
  </code></pre>
  
  <p>which will do .on('click') or something similar inside ...</p>