Javascript 我不明白为什么我第一次点击这个项目时会得到预期的行为，但当我再次点击时，我会得到预期的行为

我不明白为什么我第一次单击类为“item no done”的圆以完成状态div，或者单击类为“item done”的圆将其返回到未完成状态div时，它们会按预期工作，但是，当我再次单击时，我会得到意外行为列表项2或未发生列表项1

$function{ //要完成列表项，请执行以下操作： $'.circle'。单击，函数E{ var target=$e.target.parent； var text_decoration=target.children'p'.addClass'finished'； var addComplitedCircle=target.children'.circle'.attr'class'，'completed'.append； var item_done=target.attr'class'，'item-done'； }; //将已完成的列表项设置为未完成 $'.check'。单击，函数E{ var target=$e.target.parent.parent； var$Completedcircle=target.children'.completed'； var removeComplitedCircle=$Completedcircle.attr'class'，'circle'； var removeCheckSign=$Completedcircle.children.remove； var delete_text_decoration=target.children'p'.removeClass'finished'； var$item_no_done=target.attr'class'，'item-no-done'； }; }

将列表项列为第一项

把清单上的项目排在第一位

---

您正在为每个“.circle”和“.check”元素创建一个单击回调，只有在加载文档后才可用。任何带有类的新元素都不会有click回调

为了使新元素addComplitedCircle具有click回调，您必须在创建元素时设置它：

var addComplitedCircle = target.children('.circle').attr('class','completed').append('<img src="images/icon-check.svg" class="check">');
addComplitedCircle.on('click', <same function>)

对于您的特殊情况，我建议您查看：

将为与选择器匹配的所有子体激发，无论这些子体现在存在还是将来添加

---

这将只为todo列表中的每个更改设置两个事件，而不是一个事件。

如果您定义了类似$'.check.的函数，则在“单击”时，functione{它将不适用于加载函数后创建的元素。将其定义为$'body'。在“单击”时，则在“检查”时，functione{这样，函数被分配给body并触发元素匹配

$(function(){

  // To complete the list item 
  $('body').on('click','.circle', function(){
    var target = $(this).parent();
    var text_decoration = target.find('p').addClass('finished');
    target.find('.circle').addClass('completed').append('<img src="images/icon-check.svg" class="check">');
    target.removeClass('item-no-done').addClass('item-done');
  });

  //Make a completed list item to be uncompleted
  $('body').on('click','.check', function(){
    var target = $(this).parent().parent();
    var $Completedcircle = target.find('.completed');
    $Completedcircle.addClass('circle');
    $Completedcircle.children().remove();
    target.find('p').removeClass('finished');
    target.removeClass('item-done').addClass('item-no-done');
  });

})

$(function(){

  // To complete the list item 
  $('body').on('click','.circle', function(){
    var target = $(this).parent();
    var text_decoration = target.find('p').addClass('finished');
    target.find('.circle').addClass('completed').append('<img src="images/icon-check.svg" class="check">');
    target.removeClass('item-no-done').addClass('item-done');
  });

  //Make a completed list item to be uncompleted
  $('body').on('click','.check', function(){
    var target = $(this).parent().parent();
    var $Completedcircle = target.find('.completed');
    $Completedcircle.addClass('circle');
    $Completedcircle.children().remove();
    target.find('p').removeClass('finished');
    target.removeClass('item-done').addClass('item-no-done');
  });

})