刪除並讀取元素後，兒童處理程序消失

我嘗試在兩個HTML列表之間切換元素。在第一個列表中，新元素必須位於列表的末尾。我使用jQuery .appendTo()方法添加元素，並使用.remove()刪除元素。在第二個列表中，每個元素都必須保留，因此我使用.hide()和.show()。刪除並讀取元素後，兒童處理程序消失

這裏是我的HTML列表：

List 1 
<ul id="l1"></ul> 
List 2 
<ul id="l2"></ul>

我的列表中的一個的一個元素看起來像：<li>Element - <span>remove</span></li>

我添加一個處理程序的span從列表中刪除元素，並將其添加在另一個列表。

let ul1 = $("ul#l1"), 
    ul2 = $("ul#l2"), 
    lis = ["ga", "bu", "zo", "meu"]; 


lis.forEach(function(e){ 
    let li1 = $("<li>" + e + "- </li>"), 
     sp1 = $("<span>remove</span>"), 
     li2 = $("<li>" + e + "- </li>"), 
     sp2 = $("<span>hide</span>"); 

    sp1.appendTo(li1); 
    li1.appendTo(ul1); 

    sp2.appendTo(li2); 
    li2.appendTo(ul2); 
    li2.hide(); 

    // switching the element from the list 1 to the list 2 
    sp1.on("click", function(){ 
     li2.show(); 
     li1.remove(); 
    }); 

    // switching the element from the list 2 to the list 1 
    sp2.click(function(){ 
     li2.hide(); 
     li1.appendTo(ul1); 
    }); 
});

問題是，在將元素重新添加到第一個列表後，處理程序似乎消失了。我加入這個元素的方式與第一次相同。

爲什麼.click()處理程序第二次消失？ .remove()方法是否刪除子對象的處理程序？

來源

2017-06-14 Thibaut Guirimand