javascript - Jquery 追加在 div 前面

Question

所以我使用 Jquery Drag/Drop 将某些东西拖放到仪表板上。我现在想将我放在仪表板上的任何东西拖出仪表板，以便将其销毁/从仪表板中删除。

我尝试向拖放到仪表板上的东西添加一个类，然后尝试向其中添加一个可拖动对象，但拖动不起作用，我认为是因为当我将元素附加到仪表板时，它出现在仪表板后面（颜色有点褪色）。

这是我的代码-

    $(".draggable").draggable({helper:'clone'});
    $("#favouritesDashboard").droppable({
        accept:".draggable",
        drop: function(event,ui) {
            var toDrop = $(ui.draggable).clone();
            //create smaller version
            $(toDrop).addClass("inDashBoard");

            $(this).append(toDrop);
        }
    });
   $(".inDashBoard").click(function(){
    console.log("clicking elem in dashboard");
   });

我已经用点击替换了第二个可拖动的，console.log 从不打印，这表明我认为正在发生的事情实际上正在发生。

Answer 1

这是由于 jQuery 中事件绑定/侦听器的性质。

当页面加载时，您要触发点击事件的元素不存在，它们是动态添加的。因此，为了确保您的方法附加到与选择器匹配的新元素，您应该使用“on”或“live”

$(".inDashBoard").on( "click", function(){
   console.log("clicking elem in dashboard");
});

Answer 2

用于后期绑定http://api.jquery.com/on/。

$(document).on('click', '.inDashBoard', function(){
    console.log("clicking elem in dashboard");
});

Answer 3

这应该工作：

$(".inDashBoard").live('click', function(){
    console.log("clicking elem in dashboard");
});