javascript - 新创建的dom元素不能拖动

Question

我正在使用 jquery 和 jquery ui 创建可拖动元素。我在 https://jsfiddle.net/2j2c8vLc/ 创建了一个小的 jsfiddle 示例这表明了我正在尝试做的事情。

JavaScript 代码:

$(function(){
    $('body').append('<div id="moshe">hi</div>');
    $('#moshe').draggable();
});

在示例中，我在文档就绪事件之后向正文添加了一个 div 元素，然后尝试使其可拖动。结果是它不可拖动，类已添加到元素中，但似乎还不够。

有什么想法吗？

更新

更多信息来澄清问题..我正在尝试移动只读文本输入。

我在 http://jsfiddle.net/70f3dbLh/2/ 创建了新的 jsfiddle使用以下 JavaScript 代码:

$(document).ready(function(){
    $("<div>").attr("id", "moshe").html("<input readonly type=\"text\"></input>").appendTo("body").draggable();
});

如您所见，div 内的文本输入不可拖动

我尝试创建另一个示例，尝试创建一个没有 div 的文本输入并使其可拖动..相同的结果。它不可拖动。

jsfiddle 位于 http://jsfiddle.net/70f3dbLh/3/

JavaScript 代码:

$(document).ready(function(){
    $("<input readonly value=\"aaa\" type=\"text\"></input>").attr("id", "moshe").appendTo("body").draggable();
});

Answer 1

使用以下jsfiddle:http://jsfiddle.net/70f3dbLh/1/看看这个:http://jsfiddle.net/70f3dbLh/1/show/

代码类似于

$(document).ready(function(){
    $("<div>").attr("id", "moshe").html("hi").appendTo("body").draggable();
});

然后就可以拖动了。

更新您的更新我更新了我的帖子，因为你更新了你的帖子。

我添加了一个新的 jsfiddle。 http://jsfiddle.net/8scyhq01/2/一般来说，输入字段是不可拖动的，但如果在输入字段上方放置一个图层，则该图层是可拖动的。输入字段也会被拖动。

$("<div>").addClass("layer").attr("id", "moshe").html("<div class=\"layer\"></div><input readonly type=\"text\"></input>").appendTo("body").draggable();