JQuery dynamically created elements and click event
<p>Creating list of links dynamically using jquery, and wanted to bind separated <code>click</code> event's to each of them.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>for (var i = 0; i &lt; 7; i++) {
    var li = $('&lt;div&gt;').addClass('text-primary').css("curser", "pointer").appendTo($("#AK_test"));
    var aleg = $('&lt;a&gt;').addClass('pull-left text-primary').css('color','#337ab7').text(" Clickable link # " + i);

    aleg.on("click", function() {
        alert("clicked # " + i);
    });
    aleg.appendTo(li);
    $('&lt;br&gt;').appendTo(li);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="AK_test"&gt;&lt;/div&gt;
&lt;script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js?ver=4.1'&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>

<p>In this example alert always shows 7 (last value of i). </p>

<p>My Question: Why? For each link it should show separate value of i in alert.</p>