JQuery UI Draggable не работает на вновь созданном элементе DOM - PullRequest
Новая
       18

JQuery UI Draggable не работает на вновь созданном элементе DOM

8 голосов
/ 21 марта 2012

У меня есть некоторый элемент DOM, который можно перетаскивать с помощью jQuery UI. Все работают нормально, но когда я создаю какой-то элемент с помощью jQuery, они вообще не перетаскиваются. то есть 

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

Заранее спасибо !!!

Я пытаюсь это: 

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

Однако как-то это работает 

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

     });
</script>

Ответы [ 7 ]

10 голосов
/ 18 ноября 2012

Я знаю, что это было какое-то время, но эта проблема недавно меня тоже подвела. Как кто-то еще упомянул, вы должны повторно запустить .draggable() для вновь созданного элемента, но это не сработает, если вы определили определенные параметры в вашем .draggable(). Также не сработало добавление $().draggable() в функцию, а затем вызов функции после создания нового элемента (однако этот прием работает и со сбросом droppables - см. Рисунок).

В любом случае, короткая история -> Поместив настройку $().draggable() в функцию, а затем вызвав функцию после создания нового элемента, СДЕЛАЛ РАБОТУ, но мне пришлось ВЫБРАТЬ ЭТО из функции document ready ..... после я отключил это, это сработало.

Вы можете вызывать эту функцию столько раз, и она продолжает работать после каждого созданного элемента. Кажется, если это в заявлении document.ready, то это сделка на 1 выстрел ..

Надеюсь, это поможет.

6 голосов
/ 21 марта 2012

Вам нужно вызвать draggable () после того, как вновь созданный элемент вставлен в DOM.

Причина в том, что первая строка кода соответствует только существующим элементам. Вновь созданные элементы не выделены в первой строке.

1 голос
/ 20 июля 2016

Вы должны вызывать функцию draggable () каждый раз, когда вызываете действие события: 

$('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"  
   });
 });
});
1 голос
/ 13 июня 2012

У меня была эта проблема, но после прочтения я смог ее решить. поэтому вы должны снова вызвать метод draggable () после создания нового элемента, это мой код: 

$(".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
        });
    });
1 голос
/ 22 марта 2012

На самом деле кажется, что есть проблема с Draggable.Когда вы добавляете htmlTag, а затем пытаетесь найти его и сделать его перетаскиваемым, он не распознает его.попробуйте создать новый элемент, используя createElement, а затем добавьте его.Надеюсь, что это работает 

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

или 

var newEle = document.createElement('p');
$(newEle).attr("class","draggable");
$('body').append($(newEle));
$('p.draggable').draggable();
0 голосов
/ 28 августа 2018

Вы можете использовать setTimeout для вызова перетаскиваемой функции после создания нового элемента.

$('div').click(function(){
 $('body').append('<div class="box"></div>');
 setTimeout(function() {
  $('div.box').draggable({
   drag: function( event, ui ) {},
   cursor:'-webkit-grabbing'
  });
 },1000);
})
0 голосов
/ 30 мая 2017

Вы должны применить перетаскивание на экземпляр только что созданного объекта, Переписанный код: 

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

Теперь должно работать.

...