javascript - 与 Ajax 循环中的 onClick 不起作用

Question

我在下面有这个功能。这是一个查看项目列表的简单循环。对于每个项目，它都会进行一个 NeDB 查询(这里无关紧要，只要考虑它作为 Ajax 函数工作)，检索与该项目对应的任务，然后显示任务和一个编辑按钮。

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) {
    $('#my-list').append('<li>Edit</li>');       
  });
});

我希望当我点击“编辑”时，它会运行 myFunction()。

所以通常，我会像这样使用点击:

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) {
    $('#my-list').append('<li>Edit</li>');
    $('#my-list li').on('click', function(){
      myFunction();
    }
  });
});

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

这个我也试过

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

但是它不识别我的函数

解决方案是什么？

Answer 1

我们应该只听 click事件 1 <li>元素

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();
    }
  });
});

希望这可以帮助:)