jQuery + Sortable + en direct

Je suis en ajoutant des éléments de liste dans une page dynamique avec $.obtenir, puis en les ajoutant à l'OL élément. Assez habituel à ce point.

Mais jQuery n'est pas au courant de ces nouveaux éléments lorsqu'elles sont chargées dans la page, et je ne serais pas capable de le faire sortable.

J'ai fait quelques essais avec jQuery Live, mais ne pas obtenir n'importe où de pentecôte...

source d'informationauteur user202411

  1. 16

    La refresh méthode de .sortable() ne semble pas reconnaître li's qui ne sont PAS ajoutés par le biais de la .sortable() fonctions.

    Essayez d'ajouter votre .sortable() initialisation du code dans une fonction qui vous appelez sur le document de prêt ET dans vous code où vous ajouter dynamiquement des li'.

    Au lieu de:

    jQuery(document).ready(function() {
    jQuery("#mySortableOL").sortable({
        ...
    });
}
...
jQuery("#mySortableOL").append(...);
jQuery("#mySortableOL").sortable("refresh");

    Essayez quelque chose comme:

    jQuery(document).ready(function() {
    jQuery("#mySortableOL").doSort();
}
...
jQuery("#mySortableOL").append(...);
doSort();
...
function doSort(){
    jQuery("#mySortableOL").sortable({
        ...
    });
}
  2. 6

    Avez-vous essayez .sortable ("actualiser")?
    http://docs.jquery.com/UI/Sortable#method-refresh

  3. 0

    sur la fin de la queue de votre code juste ajouter .sortable({}); avec tous vos paramètres respecified. Il y a probablement une façon de le faire sans dupliquer votre code en utilisant une fonction ou quelque chose, mais au moins cela fonctionne.

    $('#List').live('click',function(e){

var myHTMLcode = '<li>New Item</li>'

myHTMLcode.appendTo('#List').sortable({
 items  : 'li',
 axis  : 'xy',    

 update  : function(event, ui){SPECIFIC Sortable FUNCTION CODE HERE}).fadeIn();
)};
  4. -2

    J'ai trouvé cette solution et fonctionne très bien pour moi. 

    makesortable = function(){
        $( "#mylist" ).sortable({
            ...
        })
      };
...
//after list refresh :
makesortable();