2010-02-04 14 views
3

J'ai un script qui sélectionne et extrait plusieurs éléments. Cela fonctionne très bien mais quand je veux ajouter un nouvel élément à cette fonction, l'ajouter au DOM, cela ne fonctionne pas. La fonction est:Le nouvel élément jQuery ajouté à DOM ne fonctionne pas

$(function() { 
     var selected = $([]), offset = {top:0, left:0}; 
     $("#selectable1").selectable(); 

     $("#selectable1 span").draggable({ 
      start: function(ev, ui) { 
       $(this).is(".ui-selected") || $(".ui-selected").removeClass("ui-selected"); 

       $("span").removeClass("cica"); // ads class Cica to the draged/selected element 
       $(this).addClass("cica"); 

       selected = $(".ui-selected").each(function() { 
        var el = $(this); 
        el.data("offset", el.offset()); 
        $(this).text("Selected and dragging object(s)"); 
       }); 

       offset = $(this).offset(); 
      }, 
      drag: function(ev, ui) { 
       var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left; 
       selected.not(this).each(function() { 

        var el = $(this), off = el.data("offset"); 
        el.css({top: off.top + dt, left: off.left + dl}); 

       }); 

      }, 
      stop: function(ev, ui){ 
       $(this).text("Drag has stopped"); 
      } 
     }); 
    }); 

Le nouvel élément est ajouté comme ceci:

$('<span class="drag">Xia</span>').appendTo('#selectable1'); 

Je sais que je peux utiliser en direct pour le faire fonctionner, mais je ne sais pas où l'ajouter dans le script. Je sais seulement comment l'ajouter sur un événement comme clic, mouseover.

S'il vous plaît laissez-moi savoir si vous avez quelques conseils sur celui-ci.

Merci

Répondre

3

Ce que je ferais est de mettre en place « # selectables1 » avec un gestionnaire d'événements pour un événement maquillé appelé « dragSetup ». Cela ressemblerait à quelque chose comme ceci:

$('#selectables1').bind('dragSetup', function() { 
    $(this).find('span:not(.dragReady)') 
    .draggable({ ... }) 
    .addClass('dragReady'); 
}); 

Ensuite, chaque fois que vous ajoutez un nouveau, vous pouvez simplement appeler:

$('#selectables1').trigger('dragSetup'); 
+0

Pointy, je reçois une erreur de syntaxe sur cette ligne: $ (ce) .Find ('envergure: non (.dragReady)') i je verrai si je peux le réparer et faire un essai – Mircea

+0

Débarrassez-vous du "i" final - c'est une faute de frappe :-) Désolé à ce sujet; Je vais éditer la réponse. – Pointy

+0

OK, j'ai fait votre code. Cela rend le nouvel élément dragable mais il tue la fonction elle-même. Je veux dire que la fonction était destinée à rendre les éléments sélectionnables et glissables en même temps. Je n'ai probablement pas implémenté votre solution correctement. J'ai besoin de regarder plus dans ceci. – Mircea

2

Vous devez utiliser live pour attacher les événements aux éléments DOM qui sont ajoutés une fois que la DOM est chargé. jQuery Doc for live

+0

Était en train de taper la même réponse. – RKitson

+0

2 choses - 1) Vous n'avez * pas * à, mais c'est une meilleure façon. 2) Ce n'est pas une description précise de la façon dont '.live()' fonctionne vraiment. Il écoute au niveau du document en s'appuyant sur le fait que les événements sont en bulle, rien n'est réellement créé ou attaché avec de nouveaux éléments. Le même écouteur de niveau de document va tout simplement attraper les événements de nouveaux éléments de la même manière, car ils ont fait des bulles. –

+0

Comment "live" est supposé fonctionner quand ce qu'il fait utilise le plugin "draggable" sur les éléments? En d'autres termes, comment "live" va-t-il se connecter à la fonctionnalité "draggable"? – Pointy