Narzędzie przeciągane jQuery UI nie działa na nowo utworzonym elemencie DOM

Question

Mam element DOM, który można przeciągnąć za pomocą interfejsu użytkownika jQuery. Wszystkie działają poprawnie, ale gdy tworzę element za pomocą jQuery, nie są one w ogóle przeciągalne. tj.

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

Z góry dziękuję !!!

próbuję to:

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

jednak jakoś to działa

<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

Trzeba zadzwonić przeciągany() po nowo utworzony element jest umieszczony w DOM.

Powodem jest to, że pierwszy wiersz kodu pasuje tylko do istniejących elementów. Nowo utworzone elementy nie są wybierane w tym pierwszym wierszu.

Answer 2

Wygląda na to, że istnieje problem z przeciąganiem. Po dołączeniu jakiegoś htmlTag, a następnie spróbuj go znaleźć i uczynić możliwym do przeciągnięcia, nie rozpoznaje go. spróbuj zrobić nowy element za pomocą createElement, a następnie dodaj go. Nadzieję, że to działa

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

lub

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

Answer 3

miałem ten problem, ale po przeczytaniu tego mogłem go rozwiązać. więc trzeba wywołać metodę ponownie Draggable() po zakończeniu budowy nowego elementu, to jest mój kod:

$(".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

znam jej już trochę czasu, ale ten problem niedawno podsłuchu mnie też. Jak ktoś wspomniał, musisz ponownie uruchomić .draggable() na nowo utworzonym elemencie, ale to nie zadziała, jeśli zdefiniowałeś pewne opcje w swoim .draggable(). Co też nie działało, to wstawianie $().draggable() do funkcji, a następnie wywoływanie funkcji po utworzeniu nowego elementu (ta sztuczka działa jednak z resetowaniem droppables - patrz rysunek).

W każdym razie, krótka historia -> Wprowadzanie ustawienia $().draggable() w funkcji, a następnie wywołanie funkcji po utworzeniu nowego elementu DID WORK, ale musiałem WYŁĄCZYĆ JĄ Z funkcji document ready ..... po tym, jak dezaktywowałem to , zadziałało.

Możesz wywołać tę funkcję wiele razy i działa ona po każdym utworzonym elemencie. Wygląda na to, że jest w oświadczeniu document.ready, to jest umowa na 1 strzałę.

Nadzieję, że pomaga.

Answer 5

Należy zadzwonić Draggable() Funkcja każdym razem wywołać akcję zdarzenia:

$('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

Musisz zastosować przeciągać na przykład nowo utworzonego obiektu, kod przepisany:

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

To powinno teraz działać.