無法綁定到Leaflet彈出窗口上的click事件

Question

我正在使用Leaflet繪制地圖，在彈出窗口中我添加了一個鏈接，該鏈接應該導致更詳細的描述，描述與地圖分開並使用手風琴排列到列表中，因此每個描述都是隱藏的。

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

我已經在這里和這里報告了這是github上的一個bug給Leaflet的開發者，但他關閉了bug回復說這不是問題而且我可以使用另一個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')

哪個會做.on（'click'）或類似的內容...

Answer 1

在您提出的bindPopup 單中指定，您可以創建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函數來做你需要它做的事情....

以下是示例中的上述代碼部分

無法綁定到Leaflet彈出窗口上的click事件

問題描述

1 個解決方案

解決方案1
9 已采納 2012-06-29 15:19:37

無法綁定到Leaflet彈出窗口上的click事件

問題描述

1 個解決方案

解決方案1 9 已采納 2012-06-29 15:19:37

解決方案1
9 已采納 2012-06-29 15:19:37