jQuery live draggable/live droppable?

Question

Вот мой код. Я добавил несколько классов и удалил некоторые из его функций. CSS хорошо отражает дизайн, но когда я хочу использовать классы, которые я добавил к этой функции, jQuery не получает этого. Как я могу использовать функцию live или 'on'? Как я могу получить доступ к этим классам, чтобы снова использовать их в функции droppable?

$(".droppable").droppable({ 
    drop: function(event, ui) { 
     $(this).removeClass('droppable'); 
     $(this).removeClass('ui-droppable'); 

     var dragIMG = '<img class="dragBox ui-draggable" data-type="'+img+'" src="img/'+img+'.jpg" alt="" style="position: relative;"/>'; 
     $(this).append(dragIMG); 
     $('#box'+box).empty(); 
     $('#box'+box).addClass('droppable'); 
     $('#box'+box).addClass('ui-droppable'); 
    } 
}); 

Answer 1

Вы не можете, насколько я знаю, делегировать плагин таким же образом, что вы можете делегировать обработчик событий. Селектор выбирает элементы, которые совпадают в момент его выполнения, затем запускается код плагина для выполнения любой инициализации этих элементов. Любые новые элементы, которые будут соответствовать селектору в более поздней точке, не будут иметь код инициализации, вызываемый на них.

Вам нужно будет снова вызвать функцию плагина. Нечто подобное должно работать:

var droppableOptions = { 
    drop: function (event, ui) { 
     $(this).removeClass('droppable'); 
     $(this).removeClass('ui-droppable'); 

     var dragIMG = '<img class="dragBox ui-draggable" data-type="' + img + '" src="img/' + img + '.jpg" alt="" style="position: relative;"/>'; 
     $(this).append(dragIMG); 
     $('#box' + box).empty().addClass('droppable').addClass('ui-droppable').droppable(droppableOptions); 
    } 
} 

$('.droppable').droppable(droppableOptions); 

Answer 2

Или вы можете использовать плагин под названием livequery (https://github.com/brandonaaron/livequery) и вызовите dragable-функцию.

Пример

$('a') 
.livequery('click', function(event) { 
    alert('clicked'); 
    return false; 
});