Javascript 使用Ajax在循环中单击onClick不起作用

我在下面有这个函数。这是一个查看项目列表的简单循环。对于每个项目，它会生成一个NEDB查询（这里不重要，只是考虑它作为Ajax函数工作），检索与项目对应的任务，然后显示任务和编辑按钮。

函数myFunction（）{
console.log（“工作”）；
}
$。每个（项目、功能（索引、项目）{
//tasks.find需要100毫秒，就像Ajax请求一样
tasks.find（{}，函数（err，tasklist）{
$（“#我的列表”）.append（“
编辑”
”）；
});
});

我希望当我单击Edit时，它会运行myFunction（）

通常，我会像这样点击：

函数myFunction（）{
console.log（“工作”）；
}
$。每个（项目、功能（索引、项目）{
//tasks.find需要100毫秒，就像Ajax请求一样
tasks.find（{}，函数（err，tasklist）{
$（“#我的列表”）.append（“
编辑”
”）；
$（“#我的列表li”）。在（'click'，function（）上{
myFunction（）；
}
});
});

问题是点击函数在一个循环中，所以它为循环的每次迭代创建函数，所以它打印“工作”的次数与打印项目的次数相同

我也试过这个

$('#my-list').append('<li onClick="myFunction()">Edit</li>');

$（“#我的列表”）.append（“
Edit
”）；

但它不承认我的功能

---

解决方案是什么？

我们应该只听

单击
1
元素的事件

function myFunction() {
  console.log('Work');
}

$.each(projects, function( index, project ) {
  // tasks.find takes 100ms, it's like an Ajax request
  tasks.find({}, function (err, tasklist) {
    var $newLi = $('<li>Edit</li>');
    $newLi.appendTo('#my-list');
    $newLi.on('click', function(){
      myFunction();
    }
  });
});

函数myFunction（）{
console.log（“工作”）；
}
$。每个（项目、功能（索引、项目）{
//tasks.find需要100毫秒，就像Ajax请求一样
tasks.find（{}，函数（err，tasklist）{
变量$newLi=$（“
编辑”
”）；
$newLi.appendTo（“#我的列表”）；
$newLi.on（'click'，function（）{
myFunction（）；
}
});
});

希望这能有所帮助：）
在上更改您的
。单击
功能以：

$("#my-list).on("click", function(e) {
   // You can access the specific element child clicked
   // by using $(e.target);
   myFunction();
})

为什么不直接打开你的
。单击
功能退出循环？@Pytth，因为它不会在li元素上应用事件，因为li元素是在该任务之后创建的。find结束。因此，如果我打开。单击退出循环，它会继续运行。在li元素出现之前单击。这完全有道理。我还写了一个答案，您可以在其中找到答案只需将
click
事件添加到父容器中，这样它只会被调用一次。谢谢：）我做了一个变量var length=projects.length；在循环中：if（index==（length-1））{myFunction（）}没有问题！这也是一个很好的解决方案，当您有1000个项目时，您的工具箱中可能需要添加
单击
侦听器。