Question

我正在使用ajax向我的页面获取一些信息

在数组中收到的信息，所以我用循环将它们以这种方式附加到我的html页面：

for i to i less than my information  i++

$('#ul').append("<li>"+info[i]+"</li>");

但我想为每个'li'标签添加一个不同的.click事件，但我不想为此循环另一个时间。有没有简单的方法呢？

我尝试了这些解决方案，但似乎没有任何效果：

A）

for i to i less than my information  i++

$('#ul').append(   $("<li>"+info[i]+"</li>").click(function(){alert(i)})    );

返回所有这些的最后一个“i”值

B）

for i to i less than my information  i++

$('#ul').append("<li>"+info[i]+"</li>").find('li:last-child').click( function( {alert(i)} )    );

还返回所有这些的最后一个“i”值

有没有简单的方法可以做到这一点？

Answer 1

以下内容已经过测试，并按预期工作：

info = ["Jonathan","Sampson","Programming"];

$(info).each(function(i){
  $("<p>"+info[i]+"</p>").click(function(){
    alert(i);
  }).prependTo("body");
});

Answer 2

$.each(info, function() {
  $("<li></li>").text("...").click(function() {
    // do stuff
  }).appendTo("#ul");
});

Answer 3

在点击时，我将被设置为循环中的最后一项。所以你必须将数据存储在li上，如下所示：

$('#ul').append(   $("<li>"+info[i]+"</li>").data('num',i).click(function() {alert($(this).data('num'));})    );

Answer 4

您遇到的问题是访问回调中的变量i，这是一个闭包。

这是一个相关的SO问题，对您有所帮助。我想你也可以在接受的答案中使用第二个代码片段中的jQuery .each()功能：
Access outside variable in loop from Javascript closure

链接的“封闭”页面也完全描述了您的问题：
http://matthew-marksbury.blogspot.com/2008/12/javascript-closures-and-scope.html

Answer 5

试试这会更好

//只在这里绑定事件一次！：

$(function(){
    $("#parent>li").live("click", function(){
    alert( $(this).html() );        
});    

// your data
var info = ["a", "b", "c"];

var list = [];
$.each(info, function(index, item){
    list.push("<li>");
    list.push(item);               
    list.push("</li>");               
});

$("#parent").append( list.join("") );


// you page like this(it has an id property):

<ul id="parent"></ul>

jquery附加在页面中

5 个答案: