传单标记事件在错误的时间触发

Question

我正在使用 leaflet (v 0.7.7) 并且我有一个 Ajax 调用获取一些服务器数据以可点击文本标签的形式绑定到我的地图。在我绑定从服务器获得的 JSON 数据的循环中，我有以下代码：

var item_name = L.marker([data.X, data.Y],
{
    icon: L.divIcon(
    {
        className:'MapTag', 
        iconAnchor: [10, 10],
        html:'<img src="/Images/Map/Item' + data.Id + '.png">' + data.Name 
    })
}).on('click', onItemClick(data.Id));

item_layer.addLayer(item_name);

在其他地方，我有 onItemClick 代码：

function onItemClick(item_id)
{
    alert(item_id);
}

现在，好消息是，如果我注释掉其中的事件绑定部分，循环就会完成，传单会正常运行。但是，当我绑定点击事件时，事情变得很奇怪。对于我绑定到的集合中的每个项目，都会触发一次该事件。当从服务器加载数据时，每次通过带有当前项目 ID 的循环，我都会弹出一个警报。感觉它被解雇了 'onload' 而不是 'onclick'。最重要的是，它在加载后也不会记录对 divIcons 的点击。

这里一定有我遗漏的东西，但我看不到它是什么。有什么建议吗？

这个问题类似于 (Marker in leaflet, click event)

分辨率： 我将 divIcon 声明的最后一行更改为：

}).on('click', function(e){ alert(data.Id); });

这现在可以正常工作了。我猜测奇怪的绑定行为是由于未绑定定义的方法引用和传单在其事件管理代码中具有某种功能崩溃的结果。

我保留了 'e' 参数，因为这是传单文档显示的内容。我没有使用它，但如果其他人复制粘贴它，他们可能需要它。

Answer 1

您混淆了函数引用和函数调用的概念，并且您没有对项目 ID 进行 closure。

如果你这样声明：

function onItemClick(id) { alert(id); }

这将打印对函数的引用：

console.log( onItemClick );

这会打印调用该函数的 return 值（因为它 return 什么都没有，这等于 undefined）：

console.log( onItemClick(5) );

所以当你这样做的时候：

L.marker(....).on('click', onItemClick(id) );

函数被调用，on() 收到该函数的 return 值，即：

L.marker(....).on('click', undefined );

你想要做的是return一个函数:

function onItemClick(id) { return function(){ alert(id); } }

这样，当你这样做时

L.marker(....).on('click', onItemClick(5) );

这将进行函数调用，并使用 return 值，现在看起来像这样：

L.marker(....).on('click', function() { alert(5); } );

传单标记事件在错误的时间触发

Leaflet marker event fires at wrong time

javascript

leaflet