jQuery addclass，removeclass和appendTo

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")