JQuery привязки в цикле

Question

У меня есть цикл

for (i = 0; i < 10; i++) 
{ 
    outPut.innerHTML += "<div id='file" + i + "'>" + i + "</div>"; 
    $('#file' + i).on('click', function(event) { 
     alert('User clicked on ' + i); 
    }).css('cursor', 'pointer'); 
} 

и только последний элемент получает событие прилагается. В чем проблема?

Смотрите тест здесь http://jsfiddle.net/haF7Y/

Answer 1

Вот что вам не хватает - слушатели событий асинхронны по своей природе! Поэтому при выполнении такой задачи всегда используйте функцию закрытия внутри цикла! Ниже -

for (i = 0; i <10; i++){ 
    (function(i){ 
    outPut.innerHTML +="<div id='file"+ i + "'>" + i+ "</div>"; 
    $('#file' + i).on('click', function(event) { 
     alert('User clicked on ' + i); 
    }).css('cursor', 'pointer'); 
    }(i)) 
} 

Answer 2

Удалить событие щелчка с for loop.

$(document).on('click', '[id^=file]', function(e){ 
    alert('user clicked on '+ this.id.split('file')[1]); 
}); 

Answer 3

работы с Jquery объектами, как это (и создать замыкание)

var jOutPut = $('div:first'); 

var create = function(i) { 
    var j = $('<div/>') 
     .attr('id', 'file' + i) 
     .css('cursor', 'pointer') 
     .html(i) 
     .click(function(event){ 
      alert('User clicked on ' + i); 
     }); 

    jOutPut.append(j); 
} 

for(i=0;i<10;i++) { 
    create(i); 
} 

Answer 4

Это как ваш код должен быть написан:

for (i = 0; i < 10; i++) 
{ 
    var newEl = $("<div class='file' data-index='"+i+"'>" + i + "</div>").css('cursor', 'pointer'); 
    outPut.append(newEl); 
} 

$('.file').click(function(event) { 
     alert('User clicked on ' + $(this).attr('data-index')); 
}); 

А вот скрипку, чтобы показать работы: http://jsfiddle.net/qX8RQ/