jQuery UI draggable不能处理新创建的DOM元素

我有一些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 :( 

提前致谢 ！！！

我正在尝试这个：

  $(document).ready(function(){ $('body').append('
Newly Created Paragraph
'); $('p.draggable').draggable(); **//This is not working** });  

但不知何故，这是有效的

   $(document).ready(function(){ $('body').append('
Newly Created Paragraph
') .find('p.draggable').draggable(); **This is working** });  

Answer 1

我知道它已经有一段时间了，但是这个问题最近也让我感到烦恼。 正如其他人提到的那样，你必须在新创建的项目上重新运行.draggable() ，但是如果在.draggable()定义了某些选项，那么这不起作用。 还有什么不起作用的是将$().draggable()放在一个函数中，然后在创建一个新元素后调用该函数（但这个技巧确实可以用于重置droppables – 去图）。

无论如何，长话短说 – >将$().draggable()设置在一个函数中，然后在创建新元素DID WORK之后调用该函数，但是我不得不把document ready函数拿出去…..我禁用了它，它起作用了。

您可以多次调用该函数，并在每个创建的元素之后继续工作。 看起来如果它在document.ready声明中，那么它的一次性交易……

希望有所帮助。

Answer 2

在将新创建的元素插入DOM之后，需要调用draggable（）。

原因是第一行代码只匹配现有元素。 在第一行中未选择新创建的元素。

Answer 3

实际上似乎有可拖动的问题。 当你附加一些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(); 

Answer 4

我有这个问题，但看完之后我就可以解决了。 所以你必须在构建新元素后再次调用draggable（）方法，这是我的代码：

 $(".in-browser").each(function(){ $(this).dblclick(function(){ var browseIn = $(this).data("href"); var browserHTML = '
\ 
\ 
_ \ 
# \ 
x \ 
\ 
\ 
\ \ 
\ 
'; $("body").append(browserHTML); $(".draggable").draggable(); //look at here }); }); 

Answer 5

每次调用事件动作时都应该调用draggable（）函数：

 $('body').on('click', '.add-new-table', function () { $( ".canvas" ).prepend('
Drag me
'); $(function(){ $(".draggable" ).draggable({ containment: "parent" }); }); }); 

Answer 6

您必须在新创建的对象的实例上应用draggable，重写代码：

它现在应该工作。

Answer 7

在新元素生成后，您可以使用setTimeout调用draggable函数。

 $('div').click(function(){ $('body').append('
'); setTimeout(function() { $('div.box').draggable({ drag: function( event, ui ) {}, cursor:'-webkit-grabbing' }); },1000); })