No se puede vincular al evento click en la ventana emergente Folleto

Estoy usando Leaflet para dibujar un mapa, dentro de las ventanas emergentes he agregado un enlace que debería conducir a una descripción más detallada, la descripción está separada del mapa y organizada en una lista usando un acordeón, entonces cada descripción está oculta.No se puede vincular al evento click en la ventana emergente Folleto

Puedo usar un anclaje para vincular el contenido del acordeón, pero necesito ejecutar algunos JavaScript onclick, así que estoy tratando de agregar un controlador de eventos click; no funciona.

Aquí está mi código:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Leaflet Quick Start Guide Example</title> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <!--<script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script>--> 
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script> 

    <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" /> 
    <!--[if lte IE 8]><link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.ie.css" /><![endif]--> 

</head> 
<body> 

    <div id="map" style="width: 600px; height: 400px"></div> 
    <div id="log"></div> 

    <div id="map_box_text" class="status_half"> 
      <br> 
      <br> 
     <p>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. 
     <div class="accordion"> 
      <h4><a href="#" class="pointpopup" id="point_111_11"> Ioff :: **** ***</a></h4> 
       <div>Detailed data</div> 
      <br> 
      <br> 
      <h4><a href="#" class="pointpopup" id="point_222_22">Us sb :: **** *** </a></h4> 
       <div>Detailed data</div> 
      <br> 
      <br> 
      <h4><a href="#" class="pointpopup" id="point_333_33">Ioff :: **** ***</a></h4> 
       <div>Detailed data</div> 
      <br> 
      <br> 
      <h4><a href="#" class="pointpopup" id="point_555_44">Us sb :: **** *** </a></h4> 
       <div>Detailed data</div> 
     </div> 
    </div> 

    <script src="http://leaflet.cloudmade.com/dist/leaflet.js"></script> 
    <script type="text/javascript"> 
    $(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 &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("<a href=\"#point_111_11\" class=\"map_popup link\">Ioff</a> <br>**** ***"); 
       point["point_222_22"] = new L.Marker(new L.LatLng(51.6616333333333,-0.0528583333333333)).bindPopup("<a href=\"#point_222_22\" class=\"map_popup link\">Us sb</a> <br>**** ***"); 
       point["point_333_33"] = new L.Marker(new L.LatLng(52.3910783333333,-0.696951666666667)).bindPopup("<a href=\"#point_333_33\" class=\"map_popup link\">Ioff</a> <br>**** ***"); 
       point["point_555_44"] = new L.Marker(new L.LatLng(51.641485,-0.15362)).bindPopup("<a href=\"#point_555_44\" class=\"map_popup link\">Us sb</a> <br>**** ***"); 

     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'); 
     }) 
    }) 
    </script> 
</body> 
</html>

se puede comprobar en JS Fiddle

He informado esto como un error en github a desarrollador de la ficha here y here pero cerca fallo respondiendo que es no es un problema y puedo usar otro class - que no funciona.

Editar: que he encontrado algunos en mi propia también: http://jsfiddle.net/M5Ntr/12/ pero todavía hay un problema, lo que potencialmente puede haber unos 500 puntos, por lo que me gustaría tener menos código como sea posible, he tratado para crear la función, pero no puedo pasar variables :(

esto está funcionando

point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").on('click', function (e) { console.log("clicked (Try to open Accordion): " + e.target) });

pero esto es preferible (no funciona):

point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").on('click', myfunction('point_111_11')); 

function myfunction(seclectedId){ 
    //do something with seclectedId 
    console.log(seclectedId) 
}

o incluso

point["point_111_11"] = new L.Marker(new L.LatLng(51.4800166666667,-0.43673)).bindPopup("<b>Ioff</b> <br>**** ***").myBindFunction('point_111_11')

que hará .on ('clic') o algo similar dentro ...

Fuente

2012-06-29 Radamanf

Según se especifica en el ticket you raised puede crear elementos DOM y pasarlos al método bindPopup. .. así que usted puede hacer esto:

var domelem = document.createElement('a'); 
domelem.href = "#point_555_444"; 
domelem.innerHTML = "Click me"; 
domelem.onclick = function() { 
    alert(this.href); 
    // do whatever else you want to do - open accordion etc 
}; 

point["point_555_44"] = new L.Marker(new L.LatLng(51.641485, -0.15362)).bindPopup(domelem);

Sólo tiene que actualizar la función onclick a hacer lo que tiene que hacer ....

Here is the above section of code within your example

Fuente

2012-06-29 15:19:37 ManseUK

he encontrado algo por mi cuenta: – Radamanf

@Geb creo que su comentario le falta algo ..... – ManseUK

lo siento, me gustaría decir gracias por su tiempo, he actualizado mi pregunta original con algunos que quiero escribir aquí, pero en los comentarios es más difícil de escribir, entonces me molestó en el trabajo. – Radamanf

No se puede vincular al evento click en la ventana emergente Folleto

Respuesta

Cuestiones relacionadas