Jquery：将元素从一个列表移动到另一个列表_Jquery_List

Jquery：将元素从一个列表移动到另一个列表

jquery list

Jquery：将元素从一个列表移动到另一个列表,jquery,list,Jquery,List,嗯，我有两个列表。我需要做的是，每当我点击一个元素，它就会从一个列表移动到另一个列表。我的代码成功地做到了这一点，但只做了一次。如果元素被移动，我将无法将其移回。我真的不知道该怎么办。你们能帮我吗？（对不起，坏代码：））代码如下： $(document).ready(function(){ $('#list1 .item').on('click', function(e) { e.preventDefault(); $('#list2').appe

嗯，我有两个列表。我需要做的是，每当我点击一个元素，它就会从一个列表移动到另一个列表。我的代码成功地做到了这一点，但只做了一次。如果元素被移动，我将无法将其移回。我真的不知道该怎么办。你们能帮我吗？（对不起，坏代码：））

代码如下：

$(document).ready(function(){
    $('#list1 .item').on('click', function(e) {
        e.preventDefault(); 
        $('#list2').append("<option class='item' >" +this.text + "</option>");
        $(this).remove();
});

    $('#list2 .item').on('click', function(e) {
        e.preventDefault(); 
        $('#list1').append("<option class='item' >" +this.text + "</option>" );
        $(this).remove();
});

});

$（文档）.ready（函数（）{
$（'#list1.item'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（'#list2'）。追加（“+this.text+”）；
$（this.remove（）；
});
$（'#list2.item'）。在（'click'，函数（e）{
e、 预防默认值（）；
$（'#list1'）。追加（“+this.text+”）；
$（this.remove（）；
});
});

和html

<body>
    <div id="tabela1">
        <select size='5' id='list1'>
            <option class='item' >OB1</option>
            <option class='item' >OB2</option>
            <option class='item' >OB3</option>
            <option class='item' >OB4</option>
            <option class='item' >OB5</option>
            <option class='item' >OB6</option>
            <option class='item' >OB7</option>
            <option class='item' >OB8</option>
            <option class='item' >OB9</option>
            <option class='item' >OB10</option>
            <option class='item' >OB11</option>
            <option class='item' >OB12</option>

        </select>

    <div id="tabela2">
        <select size="5" id='list2'>
        <option class='item' >O</option>
        </select>
</body>
</html>


OB1
OB2
OB3
OB4
OB5
OB6
OB7
OB8
OB9
OB10
OB11
OB12
O

不要使用

在
上单击，许多浏览器都不支持它，尤其是IE和Safari。对于其他事件以及隐藏，情况相同
在
上使用更改事件，只需将所选选项添加到另一个


var$selects=$（'list1，'list2'）。在（'change'，function（）上{
//“this”是已更改的select元素
$selects.not（this.append）（$（this.find）（':selected'））
})

OB1
OB2
OB3
OB4
OB5
OB6
OB7
OB8
OB9
OB10
OB11
OB12
O
工作代码
为什么您的解决方案不起作用
当您在上执行$（'#list1.item'）时（“单击”
，jQuery将查找当前与选择器匹配的所有元素，并向其中添加事件侦听器。如果现在将元素移动到另一个列表，它将保留其原始事件侦听器，从而将其移动到第二个列表，即使它现在不再是#list1.item
的目标。问题的原因是：它也不会获取#list2.item
的事件处理程序，因为附加事件侦听器时该表达式未选择元素
为什么我提出的解决方案有效
上面的代码没有将事件侦听器绑定到元素本身，而是绑定到某个不移动的父级。它依赖于单击事件在DOM中的冒泡。也就是说，事件不仅询问实际单击的元素是否侦听该事件，还询问其每一个父级。我们可以使用它来获取父级，例如，body
，侦听事件并在创建事件时查看，即当您单击列表条目时，通过选择器将其作为目标。然后，我们可以使用此信息触发相应的JS
值得一读：，特别是关于“委托元素”的部分。您可以直接附加它。由于DOM节点是唯一的，它将自动移动
$('body').on('click', '#list1 .item', function(event){
    $(this).appendTo('#list2') // “this” is the clicked element
})

$('body').on('click', '#list2 .item', function(event){
    $(this).appendTo('#list1') // “this” is the clicked element
})