JQuery динамически создаваемые элементы и событие click

Question

Создание списка ссылок динамически с помощью jquery и требуется связать разделенные события click с каждым из них.

for (var i = 0; i < 7; i++) { 
 
    var li = $('<div>').addClass('text-primary').css("curser", "pointer").appendTo($("#AK_test")); 
 
    var aleg = $('<a>').addClass('pull-left text-primary').css('color','#337ab7').text(" Clickable link # " + i); 
 

 
    aleg.on("click", function() { 
 
     alert("clicked # " + i); 
 
    }); 
 
    aleg.appendTo(li); 
 
    $('<br>').appendTo(li); 
 
}

<div id="AK_test"></div> 
 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'></script>

В этом примере оповещения всегда показывает 7 (последнее значение I).

Мой вопрос: Почему? Для каждой ссылки он должен показывать отдельное значение i в предупреждении.

Answer 1

Благодаря T.J. Crowder, для поиска исходного решения.

Здесь же исправление для -Мой код проблемы в этом Вопрос-

for (var i = 0; i < 7; i++) { 
     var li = $('<div>').appendTo($("#AK_test")); 
     var aleg = $('<a>').css('color','#337ab7').text(" link # " + i); 

     aleg.on("click", createClickEvent(i)); 
     aleg.appendTo(li); 
     $('<br>').appendTo(li); 
    } 
    function createClickEvent(i) { 
     return function() { alert(i); }; 
    } 
    <div id="AK_test"></div>