無法綁定到點擊單張彈出事件

我正在使用單張繪製地圖，在彈出窗口內我添加了一個應該導致更詳細的描述的鏈接，描述從地圖分離並排列成列表使用手風琴，所以每一個描述都是隱藏的。無法綁定到點擊單張彈出事件

我可以使用錨鏈接到手風琴的內容，但我需要執行一些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>

您可以檢查它在JS Fiddle

我報這個以單張here和here開發商在github上一個錯誤，但他接近的錯誤回答，它的不是問題，我可以使用另一個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) 
}

甚至

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

無法綁定到點擊單張彈出事件

回答

相關問題