Свяжите различные функции для только что созданных элементов li

Question

Я создаю 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, а не 1,2,3 ... [...], как console.log() вне $ заявление ...

Answer 1

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

или

Закрытие JavaScript внутри циклов - простой практический пример

Учитывая ваш 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 способ в этом случае.

Answer 2

Таким образом, с закрытием правильный ответ будет:

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

Но это требуется только в том случае, если вам нужно передать значение цикла в функцию.