リーフレットポップアップのクリックイベントにバインドできません

リーフレットを使用して地図を描画しています。詳細な説明につながるリンクを追加しました。説明はマップから切り離され、リストに配置されていますアコーディオンを使用しているので、すべての説明が隠されています。リーフレットポップアップのクリックイベントにバインドできません

アンカーを使用してアコーディオンのコンテンツにリンクできますが、JavaScript onclickを実行する必要がありますので、clickイベントハンドラを追加しようとしています。ここで

は私のコードです：

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

あなたは私がリーフレットhereとhereの開発者にgithubの上のバグとしてこれを報告してきましたが、彼は近いバグそれはだと回答JS Fiddle

でそれを確認することができます問題ではなく、私は別のclassを使用することができます - これは動作しません。

編集：私はあまりにも自分でいくつか発見しました：http://jsfiddle.net/M5Ntr/12/ をしかし、問題がまだある、潜在的に存在し500ポイントすることができ、私は可能な限り少ないコードとして持っていると思い、私が試してみました関数を作成することが、私は、変数を渡すことはできません:(

これは

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

を働いているが、これは（動作しない）であることが好ましい：

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

.on（「クリック」）または内部の似たようなことを行います

あるいは

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

...

出典

2012-06-29 Radamanf

ticket you raisedで指定されているように、あなたはDOM要素を作成し、bindPopupメソッドに渡すことができます。 ..あなたはこれを行うことができますので：

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

あなたはちょうどあなたがそれを行うために必要なものを行うにはonclick機能を更新する必要があります....

Here is the above section of code within your example

出典

2012-06-29 15:19:37 ManseUK

私は自分で何かを見つけた：私はあなたのコメントは..... – Radamanf

@Gebは、私は私を更新しました私がここに書いてほしいと思うものがいくつかありますが、コメントでは書くのがもっと難しいですし、私は仕事に邪魔されました。 – ManseUK

申し訳ありませんが、私はあなたの時間をありがとうと言いたい何かが欠けていると思う – Radamanf

リーフレットポップアップのクリックイベントにバインドできません

答えて

関連する問題