Question

我在下面有这个功能。它是一个查看项目列表的简单循环。对于每个项目，它会生成一个NeDB查询（这里无关紧要，只考虑它作为一个Ajax函数），它检索与项目相对应的任务，然后显示任务和一个Edit按钮。

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

我们应该只收听1 click元素的<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();
    }
  });
});

希望这有助于：）

Answer 2

将您的on.click功能更改为：

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

使用Ajax循环onClick不起作用

2 个答案: