Question

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

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

这是因为click事件已附加到元素。附加事件后，必须从元素中删除它。虽然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");
});

或者您可以将click事件委托给订单元素

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

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

appendTo仍然链接到原始容器功能

1 个答案: