在无序列表(ul)之间移动列表项(li)
在无序列表(ul)之间移动列表项(li)
提问于 2014-04-17 00:17:25
快速概述:我有两个div与他们各自的无序列表。jQuery应该允许单击的项从一个div移动到下一个div。该功能似乎每个列表项只工作一次。当我在列表项移动后单击它们时，它们不会恢复到原来的div位置。我看过firebug中的html，在移动之后它的格式是正确的，但是jQuery不再能够操纵它们。帮助!
the jQuery
$('#one ul li').click(function () {
var value = $(this).text();
var id = $(this).attr('id');
$('#two ul').append('<li id="'+ id +'">' + value + '</li>');
$(this).remove();
});
$('#two ul li').click(function () {
var value = $(this).text();
var id = $(this).attr('id');
$('#one ul').append('<li id="'+ id +'">' + value + '</li>');
$(this).remove();
});html是嵌入在div中的两个列表。
<div id="one">
<ul>
<li id="1">One</li>
<li id="2">Two</li>
</ul>
</div>
<div id="two">
<ul>
<li id="3">Three</li>
<li id="4">Four</li>
</ul>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2014-04-17 00:36:31
而不是像现在这样直接单击项目：
$('#one ul li').click(function(){...})当脚本只加载到匹配的联系人时，就会出现这种情况。因为您的LI是稍后添加的(动态的)，所以没有任何事件被绑定在该事件上。您可以使用.on() jQuery函数绑定到指定作用域的父元素，这将应用于将来加载的任何元素：
$("#one").on("click", "ul li", function(){...})不同之处在于，事件被绑定到#1，但适用于其内部的任何ul li (现在和未来)。
Stack Overflow用户
发布于 2014-04-17 00:42:40
remove()从DOM元素中删除元素，并删除其事件处理程序和与DOM元素关联的任何数据。您要做的是删除单击的DOM元素(这也移除定义在它上的事件处理程序)，然后创建一个新的元素(新创建的元素没有定义事件处理程序)，并将创建的元素附加到列表元素中。相反，您应该使用append()。当您的append()元素已经是文档的一部分时，这些元素将被移动到它们的新位置。
这是一个更好的解决办法：
$('#one ul li').click(function () {
var elem = $(this);
$('#two ul').append(elem); //move element to new location
});
$('#two ul li').click(function () {
var elem = $(this);
$('#one ul').append(elem);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23122467
复制相关文章
相似问题
腾讯云开发者
