无法绑定到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