JQuery UI "drop" événement ne se déclenche pas?

Question

J'ai une interface glisser-déposer avec JQueryUI, et quand un utilisateur fait glisser un élément dans un de ses conteneurs et le supprime, je veux afficher des informations sur l'élément sélectionné. Il crée donc un nouvel élément avec la classe droppable de l'interface utilisateur. Ma question est la suivante: pourquoi ne déclenche-t-il pas un événement «drop» sur l'élément nouvellement créé?

Answer 1

Il ne se déclenche pas parce que lorsque vous exécutez $(".elementContainer").droppable(...) il lie les widgets largables aux .elementContainer éléments qui existent à ce moment-là, s vous devrez lancer le plugin à nouveau pour les éléments nouvellement créés avec la classe.

Quelque chose comme ceci:

$(document).ready(function() { 
    $(".element").draggable({snap: ".elementContainer"}); 

    $.fn.bindDroppable = function() { 
    return this.droppable({ 
     drop:function(){ 
     $('<tr><td class="elementContainer"></td></tr>') 
      .find(".elementContainer").bindDroppable().end().appendTo("table"); 
     } 
    }); 
    }; 
    $(".elementContainer").bindDroppable(); 
}); 

Ceci est la version du plugin pour réduire le code ... mais le principe de base est que vous devez appeler .droppable(...options...) sur tous les nouveaux <td> éléments aussi bien, puisque le code du widget n'a pas été exécuté sur eux avant ... parce qu'ils n'existaient pas encore.