具有不同父级的同一元素上的不同事件处理程序

Question

假设我有 2 个列表：

1. 要完成的事情（假设 5 个项目）
2. 已完成 1 （0 项）

<div id="todo">
  <div class="item">
    <div>item 1
      <button>done?</button>
    </div>
  </div>
  <div class="item">
    <div>item 1
      <button>done?</button>
    </div>
  </div>
  ....
</div>
<!-- TODO END -->
<div id="done">
</div>

当我单击按钮时，它应该将项目移动到 id 为"done"的div，并且工作正常。

但是，假设我犯了一个错误，并希望此项目再次出现在"待办事项"中。

我无法让它工作：

var done = document.getElementsByTagName('button');
for (var i = 0; i < done.length; i++) {
  var parent = done[i].parentElement;
  var gparent = parent.parentElement;
  if (gparent.getAttribute('id') === 'done') {
    done[i].addEventListener('click', itemDone, false);
  } else if (gparent.getAttribute('id') === 'todo') {
    done[i].addEventListener('click', itemNotDone, false);
  }
}

以上是我的事件侦听器的代码。

以下是两个函数的位：

这个工作并将项目从待办事项移动到完成。

function itemDone() {
  // take the button parent
  var parent = this.parentElement;
  // some other stuff here - styling changes mostly
  // move challenge to done
  var done = document.getElementById('done');
  done.appendChild(parent);
}

但我无法从完成转移到待办事项。

function itemNotDone() {
  // take the button parent
  var parent = this.parentElement;
  // some other stuff here - styling changes mostly
  // move challenge to done
  var notdone = document.getElementById('todo');
  notdone.appendChild(parent);
}

知道我应该更改什么才能使其工作吗？

Answer 1

将

itemDone方法更改为

function itemDone() {
  var done = document.getElementById('done');
  elClone = el.cloneNode(true); //clone the node so that events are not carried forward
  this.parentNode.replaceChild(elClone, el);
  done.appendChild(this.parentNode);
  this.parentNode.removeChild(this);
  elClone.addEventListener( "click", itemNotDone, false );//assign the event to go back to todo
}