传单标记事件在错误的时间触发 [英] Leaflet marker event fires at wrong time

问题描述

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

I am working with leaflet (v 0.7.7) and I have an Ajax call that gets some server data to bind to my map in the form of clickable text labels. In the loop where I am binding the JSON data that I got from the server I have the following code:

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代码：

Elsewhere, I have the onItemClick code:

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

现在，好消息，如果我注释掉事件绑定的一部分，循环完成，传单的行为应该如此。但是，当我绑定click事件时，事情变得奇怪了。对于我绑定的集合中的每个项，都会触发一次该事件。当从服务器加载数据时，我会在每次循环时弹出一个警告，其中包含当前项目的Id。感觉就像是'onload'而不是'onclick'。最重要的是，加载后它也不会在divIcons上注册点击。

Now, the good news, if I comment out the event binding part of that, the loop completes, and leaflet behaves as it should. However, when I bind the click event, things get odd. The event is fired once for each item in the collection I am binding to. When the data is loaded from the server, I get an alert popping up for each time through the loop with the current item's Id. It feels like it is being fired 'onload' rather than 'onclick'. To top it off, it also doesn't register clicks on the divIcons after loading.

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

There must be something I am missing here, but I cannot see what it is. Any suggestions?

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

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

Resolution: I changed the last line of the divIcon declaration to:

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

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

This now works as intended. I am guessing that the strange binding behavior is a result of not binding a defined method reference and leaflet having some sort of functional meltdown in its event management code.

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

I kept the 'e' argument in, since it is what the leaflet docs show. I am not using it, but if someone else copy-pastes this, they might need it.

推荐答案

你混淆了函数引用和函数调用的概念，并且您没有制作关闭超过商品ID。

You're confusing the concepts of function references and function calls, and you are not making a closure over the item ID.

如果您声明：

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

这将打印对函数的引用：

This prints the reference to the function:

console.log( onItemClick );

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

And this prints the return value of calling that function (as it returns nothing, this equals undefined):

console.log( onItemClick(5) );

所以当你这样做时：

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

函数被调用， on（）接收该函数的返回值，即：

the function gets called, and on() receives the return value of that function, i.e.:

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

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

What you want to do is have a function that returns a function:

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

这样，当你这样做时，

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

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

That will make a function call, and use the return value, which now looks like this:

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

这篇关于传单标记事件在错误的时间触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！