Impossibile associare per fare clic sull'evento sul popup del depliant

Sto utilizzando Leaflet per disegnare una mappa, all'interno del popup ho aggiunto un collegamento che dovrebbe portare a una descrizione più dettagliata, la descrizione è separata dalla mappa e organizzata nell'elenco usando una fisarmonica, quindi ogni descrizione è nascosta.Impossibile associare per fare clic sull'evento sul popup del depliant

posso usare un'ancora per collegare il contenuto fisarmonica, ma ho bisogno di eseguire alcuni JavaScript onclick così sto cercando di aggiungere un gestore di eventi click - non il suo lavoro.

Ecco il mio codice:

<!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>

si può controllare sul JS Fiddle

Ho segnalato questo come un bug su GitHub per sviluppatori di Depliant here e here ma vicino bug rispondere che si tratta di non è un problema e posso usare un altro class - che non funziona.

Edit: Ho trovato un po 'per conto mio anche: http://jsfiddle.net/M5Ntr/12/ ma c'è ancora un problema, potenzialmente ci può essere un 500 punti, quindi mi piacerebbe avere come meno codice possibile, ho provato per creare funzione, ma non posso passare variabili :(

questo funziona

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) });

ma questo è preferibile (non funzionare):

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 anche

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

che farà .on ('click') o qualcosa di simile dentro ...

fonte

2012-06-29 Radamanf

Come specificato nel ticket you raised è possibile creare elementi DOM e passarli al metodo bindPopup. .. così si può fare questo:

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);

Hai solo bisogno di aggiornare la funzione onclick di fare ciò che è necessario per fare ....

Here is the above section of code within your example

fonte

2012-06-29 15:19:37 ManseUK

Ho trovato qualcosa per conto mio: – Radamanf

@Geb Penso che il tuo commento manca qualcosa ..... – ManseUK

dispiace, vorrei dire grazie per il vostro tempo, ho aggiornato il mio domanda originale con alcuni che voglio scrivere qui, ma nei commenti è più difficile scrivere, poi sono stato disturbato al lavoro. – Radamanf

Impossibile associare per fare clic sull'evento sul popup del depliant

risposta

Problemi correlati