jQuery UI draggable non funziona sull'elemento DOM appena creato

Question

Ho un elemento DOM che è trascinabile usando l'interfaccia utente di jQuery. Tutti funzionano bene ma quando creo qualche elemento utilizzando jQuery, non sono affatto trascinabili.

$('div.draggable').draggable(); //Existing element , it works :) 
$('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :(

Grazie in anticipo !!!

Sto provando questo:

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('body').append('<p class="draggable">Newly Created Paragraph</p>'); 
     $('p.draggable').draggable(); **//This is not working** 
    }); 
</script> 

Tuttavia qualche modo questo sta lavorando

<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('body').append('<p class="draggable">Newly Created Paragraph</p>') 
       .find('p.draggable').draggable(); **This is working** 

    }); 
</script> 

Answer 1

è necessario chiamare trascinabili() dopo l'elemento appena creato viene inserito nel DOM.

Il motivo è che la prima riga di codice corrisponde solo agli elementi esistenti. Gli elementi appena creati non sono selezionati in quella prima riga.

Answer 2

In realtà sembra che ci sia un problema con trascinamento. Quando aggiungi qualche htmlTag e poi prova a trovarlo e renderlo trascinabile, non lo riconosce. prova a creare un nuovo elemento usando createElement e poi aggiungilo. Spero che funziona

var newEle = document.createElement('p'); 
$(newEle).attr("class","draggable").draggable(); 
$('body').append($(newEle)); 

o

var newEle = document.createElement('p'); 
$(newEle).attr("class","draggable"); 
$('body').append($(newEle)); 
$('p.draggable').draggable(); 

Answer 3

ho avuto questo problema, ma dopo aver letto questo ho potuto risolverlo. quindi bisogna chiamare il metodo nuovo trascinabili() dopo aver costruito il vostro nuovo elemento, questo è il mio codice:

$(".in-browser").each(function(){ 
     $(this).dblclick(function(){ 
      var browseIn = $(this).data("href"); 
      var browserHTML = '<div class="browser draggable">\ 
     <ul class="browser-buttons">\ 
      <li>_ \ 
      <li># \ 
      <li>x \ 
     </ul>\ 
     <div class="browser-win-container">\ 
     <div class="addressbar"></div>\ 
     <iframe class="opening-window" src="'+browseIn+'"></iframe>\ 
    </div>\ 
    </div>'; 
      $("body").append(browserHTML); 
      $(".draggable").draggable(); //look at here 
     }); 
    }); 

Answer 4

So che il suo stato un po ', ma questo problema di recente mi infastidiva troppo. Come menzionato da qualcun altro, devi eseguire nuovamente .draggable() sull'elemento appena creato, ma questo non funziona se hai definito alcune opzioni nel tuo .draggable(). Inoltre, ciò che non ha funzionato è stato mettere lo $().draggable() in una funzione e quindi chiamare la funzione dopo aver creato un nuovo elemento (questo trucco funziona comunque con il ripristino dei file droppabili - vai alla figura).

In ogni caso, una lunga storia breve -> Mettendo l'installazione $().draggable() in una funzione e poi chiamando la funzione dopo aver creato il nuovo elemento DID WORK, ma ho dovuto TAKE IT OUT della funzione document ready ..... dopo aver disabilitato quello , ha funzionato.

È possibile chiamare quella funzione tante volte e continua a funzionare dopo ogni elemento creato. Sembra che sia nell'affermazione document.ready quindi un affare a 1 colpo ..

Spero che questo aiuti.

Answer 5

Si dovrebbe chiamare trascinabili() funzione ogni volta che si chiama un'azione evento:

$('body').on('click', '.add-new-table', function() { 
$(".canvas").prepend('<div class="ui-widget-content draggable"><p>Drag me</p></div>'); 
$(function(){ 
    $(".draggable").draggable({ 
    containment: "parent" 
    }); 
}); 
}); 

Answer 6

Si deve applicare trascinabile sul istanza dell'oggetto appena creato, codice riscritto:

<script type="text/javascript"> 
$(document).ready(function(){ 
    var newElement = '<p class="draggable">Newly Created Paragraph</p>'; 
    $('body').append(newElement); 
    newElement.draggable(); **//This is working** 
}); 

Dovrebbe funzionare ora.