appendTo 仍然链接到原始容器函数

Question

我必须容器 div。一个包含一组用户可以从中选择的动态 div。单击一个项目时，它会附加到第二个 div 容器。发生的事情是它仍然看到第一个容器 div 函数附加到。

html 标记。 删除括号以显示。

<div id="orders">   
  <div class="order" id="1"> 1 </div>
  <div class="order" id="2"> 2 </div>
  <div class="order" id="3"> 3 </div>
</div>

jquery 标记。

<script>
$(document).ready(function(){

    $("#droplist").sortable();

    $(".order").on('click',function(){
        alert('clicked');
        $(this).removeClass('order');
        $(this).addClass('drop');
        $(this).appendTo('#droplist');
    });
});

我的问题是为什么当我删除类并放入另一个类时它仍然看到调用函数

Answer 1

发生这种情况是因为单击事件已附加到元素。附加事件后，必须将其从元素中删除。虽然 order 可能是选择器用于应用事件处理程序的类，但所有 jquery 真正说的是要使用的元素数组。

请注意，事件处理程序也仅在此处附加一次。任何未来的订单分类元素都不会有这个事件处理程序。

有几种方法可以解决这个问题。单击后，您可以删除单击事件。

http://jsbin.com/menaloxu/1/edit

$(".order").on('click',function(){
    alert('clicked');
    $(this).removeClass('order');
    $(this).addClass('drop');
    $(this).appendTo('#droplist');
    $(this).off("click");
});

或者您可以仅将点击事件委托给订单元素

http://jsbin.com/kasipexe/1/edit

$("body").on('click',".order",function(){
    alert('clicked');
    $(this).removeClass('order');
    $(this).addClass('drop');
    $(this).appendTo('#droplist');
});