Comment faire pour que jQuery fonctionne après un appel AJAX

Question

J'ai lu quelques messages à ce sujet, mais aucun n'a donné de réponse (ou les questions étaient inutilement compliquées ...). Je vais rester simple. J'utilise jQuery UI pour une fonction draggable/droppable. Lorsqu'un objet déplaçable est déposé sur l'élément cible, une fonction AJAX est appelée. Tout fonctionne bien, mais seulement une fois. Quand je l'essaie à nouveau, je ne peux même plus faire glisser l'élément. Voici mon code (simplifié):

$(document).ready(function() { 
    $(".item").draggable(); 
    $(".target").droppable({ 
     drop: function(){ 
      AjaxFunction(var1, var2); 
     }    
    }); 
}); 

Ceci est la AjaxFunction simplifiée:

function AjaxFunction (var1, var2) { 
    var url = "ajax/script.php"; 
    var data = {position: var1, tag: var2}; 
    $.post(url, data, function(data) { 
     $(".target").html(data).show(); 
    }); 
} 

Quelqu'un peut-il me donner une solution spécifique au code ci-dessus sur la façon de le faire fonctionner?

Answer 1

Vous pouvez vous référer à ce poste:

Jquery Draggable - How do I create a new draggable div on the fly that can then be dragged?

Plus précisément cette partie:

$(element).draggable('disable'); 

et

$(element).draggable('enable'); 

Il est pas exactement la même chose, mais il donne un aperçu du problème. Fondamentalement, vous pouvez essayer de désactiver draggable et droppable, puis les réactiver après votre succès ajax.

function AjaxFunction (var1, var2) { 
    var url = "ajax/script.php"; 
    var data = {position: var1, tag: var2}; 
    $.post(url, data, function(data) { 
     $(".item").draggable("destroy"); 
     $(".target").droppable("destroy"); 

     $(".target").html(data).show().droppable({revert:true}); 
     $(".item").draggable(); 
    }); 
}