工作代码

Question

好吧，我有2个列表。我需要做的是每当我点击一个元素时它会从一个列表移动到另一个列表。成功地，我的代码执行此操作，但只有一次。如果元素被移动，我无法将其移回。我真的不知道该怎么办。你能帮助我吗？（对不好的代码:)））

这是代码：

$(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();
});

});

和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>

Answer 1

请勿在{{1}}上使用click许多浏览器都不支持它，尤其是IE和Safari。其他事件也同样隐藏

在<option>上使用更改事件，只需将<select>所选选项append()用于另一个<select>

var $selects = $('#list1, #list2').on('change', function() {
  // "this" is the select element that was changed
  $selects.not(this).append($(this).find(':selected'))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
<div id="tabela2">
  <select size="5" id='list2'>
    <option class='item'>O</option>
  </select>
</div>

Answer 2

工作代码

$('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
})

为什么您的解决方案不起作用

执行$('#list1 .item').on('click'时，jQuery将查找当前与您的选择器匹配的所有元素，并将事件侦听器添加到它们。如果现在将元素移动到另一个列表，它将保留其原始事件侦听器，将其移动到第二个列表，即使现在不再是#list1 .item的目标。导致问题的原因是它不会获得#list2 .item的事件处理程序，因为在附加事件侦听器时该表达式未选择该元素。

为什么我提出的解决方案有效

上面的代码不会绑定元素本身的事件侦听器，而是绑定一些不移动的父节点。它依赖于click事件的冒泡DOM 。也就是说，事件不仅会询问实际点击的元素（如果它侦听事件），还会询问每个父元素。我们可以用它来拥有父母，例如body，侦听事件并在创建事件时查看，即当您单击列表条目时， by selector（s） 。然后我们可以使用这些信息来触发相应的JS。

值得一读：http://api.jquery.com/on/，尤其是关于“委托元素”的部分

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

2 个答案:

工作代码

为什么您的解决方案不起作用

为什么我提出的解决方案有效