Broşür açılırken tıklama olayı bağlanılamıyor

Bir harita çizmek için Leaflet kullanıyorum, pop-up'larda daha ayrıntılı bir açıklamaya götüren bir link ekledim, açıklama haritadan ayrıldı ve listeye eklendi bir akordeon kullanarak, her açıklama gizlidir.Broşür açılırken tıklama olayı bağlanılamıyor

Akordeon içeriğine bağlantı vermek için bir bağlantı kullanabilir, ancak bazı JavaScript onclick çalıştırmam gerekiyor, bu yüzden bir click olay işleyicisi eklemeye çalışıyorum - çalışmıyor.

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

Eğer JS Fiddle

üzerinde kontrol edebilirsiniz ben Talimatı here ve here geliştiren kişiye github bir hata olarak bu rapor ettik ama o yakın hata o olduğunu yanıtlarken: Burada

benim kodudur bir sorun değil ve başka bir class kullanabiliriz - hangi çalışmaz.

Düzenleme: Ben de başıma bazı buldum : http://jsfiddle.net/M5Ntr/12/ Ama hala bir problem var, potansiyel olarak orada 500 puan olabilir, bu yüzden mümkün olduğunca az kod olarak istiyorum, denedim (çalışmıyor) işlev oluşturmak ama değişkenleri :(

bu geçemez

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

çalışmaktadır, ancak bu tercih edilir:

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

DOM öğeleri oluşturmak ve bindPopup yönteme onları geçebilir belirtildiği gibi .sistem yapmak ('klik') veya içinde benzer bir şey olacaktır

hatta

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

...

kaynak

2012-06-29 Radamanf

. .. böylece bunu yapabilirsiniz:

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

sadece bunu yapmanız gerekenler yapmak onclick fonksiyonunu güncellemeniz gerekir

....

Here is the above section of code within your example

kaynak

2012-06-29 15:19:37 ManseUK

başıma bir şey buldum: i yorumunuz şey eksik olduğunu düşünüyorum – Radamanf

@Geb ..... – ManseUK

, zaman ayırdığınız için size teşekkür etmek üzgün istiyorum, ben güncelledik benim Buraya yazmak istediğim orijinal bir soruyla, ama yorum yazmakta daha zor yazıyor, sonra işte rahatsız oldum. – Radamanf

Broşür açılırken tıklama olayı bağlanılamıyor

cevap

İlgili konular