与父母不同的相同元素的不同事件处理程序

Question

我在学习，所以请好。

比方说，我有2所列出： 1 - 事情完成（可以说5项） 2 - 完成一个（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为'完成'的div。这工作正常。

但是让我们说我犯了一个错误，并希望这个项目再次出现在'todo'中。

我不能让它工作。

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

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

这里是从两个功能位：

这一个工作和运动从TODO项目DONE。

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

但我无法摆脱DONE到TODO。

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 
}