为刚刚创建的 li 元素绑定不同的函数答案

【问题标题】：Bind different functions for just created li elements为刚刚创建的 li 元素绑定不同的函数
【发布时间】：2010-08-09 20:28:09
【问题描述】：

我动态创建li 元素：

<ul>
<li id="1">1</li>
<li id="2">2</li>
<li id="3">3</li>
[...]
</ul>

li_id 是一个数组值，它返回 li id (=1,2,3...)

如何将不同的函数绑定到代码中的每个 li 元素，如下所示：

for (li_id in lids)
{
console.log(li_id);                         
$(li_id).bind('mouseover', function() {
console.log(li_id);
});
}

以上行不通。如何正确书写？

使用live() 而不是bind() 它显示lids 数组的最后一个元素的ID，而不是1,2,3...[...]，就像@ 之外的console.log() 987654330@声明...

【问题讨论】：

标签： jquery dynamic-rebinding

【解决方案1】：

http://www.mennovanslooten.nl/blog/post/62

或

JavaScript closure inside loops – simple practical example

根据您的 HTML，代码可以用两种方式编写。

使用jQuery 1.4 Event.data参数：

var lids = [1,2,3];
for (i in lids) {
    var li_id = lids[i];

    $('#' + li_id).bind('mouseover', { id: li_id }, function(ev) {
        console.log(ev.data.id);
    });
}

或者，使用匿名函数创建闭包：

var lids = [1,2,3];
for (i in lids) {
    var li_id = lids[i];

    // an anonymous function 
    (function (id) {
        $('#' + id).bind('mouseover', function() {
            console.log(id);
        });        
    })(li_id); // ...called every time with different id

}

在这种情况下，我更喜欢jQuery Event.data 方式。

【讨论】：

THX！我想这就是我想要的。但是你能告诉我如何在我的代码中实现它吗:)？

【解决方案2】：

因此，正确的答案是：

$(li_id).bind('mouseover', function(val) { 
                             return function() { 
                                console.log(val); 
                             } 
                           }(li_id));

但这仅在您需要将循环的值传递给函数时才需要。

【讨论】：

选择器是小问题。只是一个错字。闭包问题更为严重。
谢谢 Marko，实际上我现在明白了。我自己已经为此挣扎了几次，所以这实际上对我也有帮助。谢谢！