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

Question

我正在使用传单 (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);
}

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

一定有什么我在这里失踪了，但我看不到它是什么。 有什么建议？

这个问题类似于（ 传单中的标记，点击事件）

解决方案：我将 divIcon 声明的最后一行更改为：

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

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

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

Answer 1

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

如果你声明：

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

这将打印对函数的引用：

console.log( onItemClick );

这将打印调用该函数的返回值（因为它不返回任何内容，这等于undefined ）：

console.log( onItemClick(5) );

所以当你这样做时：

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

该函数被调用，并且on()接收该函数的返回值，即：

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

您想要做的是有一个返回函数的函数：

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

这样，当你做

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

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

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