JQuery动态创建元素并单击事件

-1

使用jquery动态创建链接列表，并希望将分开的click事件绑定到它们中的每一个。JQuery动态创建元素并单击事件

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（ⅰ的最后一个值）。

我的问题：为什么？对于每个链接，它应该在alert中显示单独的i值。

来源

2016-07-24 ArunK

欢迎堆栈溢出！你的问题的全部内容必须在**你的问题中**，而不仅仅是链接。链接腐烂，使问题及其答案在未来的人们中毫无用处，人们不应该离开现场去帮助你。在**问题中放置一个[mcve] **，最好使用Stack Snippets（'<>'工具栏按钮）使其可运行。更多：[*我如何提出一个好问题？]（/ help/how-to-ask） –

从您的描述来看，这可能是[* JavaScript闭合内部循环 - 简单实用示例* //stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example）。 –

感谢T.J. Crowder，寻找最初的解决方案。

这里是相同的修复程序 - 我的问题代码在这个question-

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>

来源

2016-07-24 11:42:28 ArunK

JQuery动态创建元素并单击事件

回答

相关问题