javascript jQuery UI draggable 不适用于新创建的 DOM 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9799761/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI draggable is not working on newly created DOM element
提问by Vivek
I have some DOM element which is draggable using jQuery UI.All are working fine but when i create some element using jQuery , then they are not draggable at all. i.e
我有一些可以使用 jQuery UI 拖动的 DOM 元素。所有都工作正常，但是当我使用 jQuery 创建一些元素时，它们根本不能拖动。IE
$('div.draggable').draggable(); //Existing element , it works :)
$('p.draggable').draggable() ; //Newly created paragraph with same class name, it doesnt work at all :(
Thanks in advance !!!
提前致谢 ！！！
I am trying This :
我正在尝试这个：
<script type="text/javascript">
$(document).ready(function(){
$('body').append('<p class="draggable">Newly Created Paragraph</p>');
$('p.draggable').draggable(); **//This is not working**
});
</script>
However Somehow this is working
然而不知何故这是有效的
<script type="text/javascript">
$(document).ready(function(){
$('body').append('<p class="draggable">Newly Created Paragraph</p>')
.find('p.draggable').draggable(); **This is working**
});
</script>
回答by Matt
I know its been a while, but this problem recently bugged me too. As someone else mentioned, you got to rerun .draggable()on the newly created item, but that doesn't work if you defined certain options in your .draggable(). Also what didn't work was putting the $().draggable()in a function and then calling the function after creating a new element (this trick does however work with resetting droppables - go figure).
我知道已经有一段时间了，但这个问题最近也困扰着我。正如其他人提到的，您必须.draggable()在新创建的项目上重新运行，但如果您在.draggable(). 同样不起作用的是将 放入$().draggable()一个函数然后在创建一个新元素后调用该函数（但是这个技巧确实适用于重置 droppables - 去图）。
Anyway, long story short -> Putting the $().draggable()setup in a function and then calling the function after creating new element DID WORK, but i had to TAKE IT OUT of the document readyfunction..... after i disabled that, it worked.
无论如何，长话短说-> 将$().draggable()设置放在一个函数中，然后在创建新元素后调用该函数document ready确实有效，但我不得不将其从该函数中删除..... 在我禁用它之后，它起作用了。
You can call that function as many times and it keeps on working after every created element. It seems if it's in the document.readystatement then its a 1 shot deal..
您可以多次调用该函数，并且在每个创建的元素之后它都会继续工作。似乎如果它在document.ready声明中，那么它就是一笔交易..
Hope that helps.
希望有帮助。
回答by Justice Erolin
You need to call draggable() after the newly created element is inserted into the DOM.
在新创建的元素插入 DOM 后，您需要调用 draggable()。
The reason being, is that the first line of code is only matching existing elements. Newly created elements aren't selected in that first line.
原因是第一行代码只匹配现有元素。第一行没有选择新创建的元素。
回答by Tejasva Dhyani
Actually it seems that there is problem with draggable. When you append some htmlTag and then try to find it and make it draggable, it do not recognise it. try to make a new element using createElementand then append it. Hope it works
实际上，draggable 似乎存在问题。当您附加一些 htmlTag 然后尝试找到它并使其可拖动时，它无法识别它。尝试使用创建一个新元素createElement然后附加它。希望它有效
var newEle = document.createElement('p');
$(newEle).attr("class","draggable").draggable();
$('body').append($(newEle));
or
或者
var newEle = document.createElement('p');
$(newEle).attr("class","draggable");
$('body').append($(newEle));
$('p.draggable').draggable();
回答by Tejasva Dhyani
i had this problem but after reading this i could solve it. so you have to call again draggable() method after building your new element, this is my code:
我有这个问题，但读完后我可以解决它。所以你必须在构建新元素后再次调用 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
});
});
回答by minimal
You should call draggable() function everytime you call an event action:
每次调用事件操作时都应该调用 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"
});
});
});
回答by Vinay Sheoran
You have to apply draggable on the instance of the newly created object, Rewritten code:
您必须在新创建的对象的实例上应用draggable，重写代码：
<script type="text/javascript">
$(document).ready(function(){
var newElement = '<p class="draggable">Newly Created Paragraph</p>';
$('body').append(newElement);
newElement.draggable(); **//This is working**
});
It should work now.
它现在应该可以工作了。
回答by RainerDotCom
You can use setTimeout to call draggable function after the new element has made.
您可以在创建新元素后使用 setTimeout 调用可拖动函数。
$('div').click(function(){
$('body').append('<div class="box"></div>');
setTimeout(function() {
$('div.box').draggable({
drag: function( event, ui ) {},
cursor:'-webkit-grabbing'
});
},1000);
})
