Javascript 移除并读取元素后,子处理程序消失
我尝试在两个HTML列表之间切换元素。在第一个列表中,新元素必须位于列表的末尾。我使用jQueryJavascript 移除并读取元素后,子处理程序消失,javascript,jquery,html-lists,Javascript,Jquery,Html Lists,我尝试在两个HTML列表之间切换元素。在第一个列表中,新元素必须位于列表的末尾。我使用jQuery.appendTo()方法添加元素,使用.remove()方法删除元素。在第二个列表中,每个元素必须保持在原位,因此我使用.hide()和.show() 以下是我的HTML列表: List 1 <ul id="l1"></ul> List 2 <ul id="l2"></ul> 问题是在将元素重新添加到第一个列表后,处理程序似乎消失了。我以与第一次相
.appendTo()
方法添加元素,使用.remove()
方法删除元素。在第二个列表中,每个元素必须保持在原位,因此我使用.hide()
和.show()
以下是我的HTML列表:
List 1
<ul id="l1"></ul>
List 2
<ul id="l2"></ul>
问题是在将元素重新添加到第一个列表后,处理程序似乎消失了。我以与第一次相同的方式添加此元素
为什么.click()
处理程序第二次消失了?.remove()
方法是否删除子对象的处理程序?根据jquery文档
与元素关联的所有绑定事件和jQuery数据都是
远离的。要删除元素而不删除数据和事件,请使用
.detach()代替
它工作得很好,但是doc的这一部分似乎有点模棱两可,因为它没有解释事件移除会传播到子级。
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);
});
});