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.

Элементы, которые вы хотите вызвать событие щелчка, не существуют при загрузке страницы, они добавляются динамически. Таким образом, чтобы убедиться, что ваш метод прикреплен к новым элементам, которые соответствуют селектору, вы должны использовать «на» или «жить»

$(".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"); 
});