删除并读取元素后，儿童处理程序消失

我尝试在两个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