Question

我有点问题，我正在尝试在div中找出一种选项，点击后，附加到另一个div，如果再次在另一个div中点击它们，它们将返回所以在......这是我的代码：

    $(".selectable").bind('click', function(){
        $(this).removeClass("selectable").addClass("unselectable").appendTo('#selectableQuitar');
    });

    $(".unselectable").bind('click', function(){
    $(this).removeClass("unselectable").addClass("selectable").appendTo('#selectableAgregar');  
  });

我尝试了很多方法，当你点击第一个元素时它将改变类并附加到下一个div，完全相反...第一次点击确实有效，但第二次不完全，如果你检查元素它将显示新类但click事件不会触发...任何想法？以防您需要更多信息，里面的div和元素：

<div id="pruebaSelectableAgregar">
<ol id="selectable" class="prueba">
  <li class="selectable">Item 1</li>
  <li class="selectable">Item 2</li>
  <li class="selectable">Item 3</li>
  <li class="selectable">Item 4</li>
  <li class="selectable">Item 5</li>
  <li class="selectable">Item 6</li>
</ol>
</div>

<div id="pruebaSelectableQuitar">
    <ol id="selectableQuitar">
        <li class="unselectable"> Prueba 1</li>
    </ol>
</div>

Answer 1

由于您要为使用点击事件注册的元素动态添加和删除类，因此在这种情况下您必须使用event delegation。

尝试，

$(document).on('click', '.selectable', function(){
    $(this).removeClass("selectable").addClass("unselectable").appendTo('#selectableQuitar');
});

$(document).on('click', '.unselectable', function(){
    $(this).removeClass("unselectable").addClass("selectable").appendTo('#selectableAgregar');  
});

此外，您可以使用.toggleClass()来简化代码，例如

.toggleClass("selectable unselectable")

jquery addclass，removeclass和appendTo

1 个答案: