Свяжите различные функции для только что созданных элементов 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));

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