Jquery，针对新元素

Question

我对 Javascript 和 Jquery 库领域还很陌生，所以请多多包涵。

我通过在父 div 中添加新 div 来操作 DOM，如下所示：

var newdiv = document.createElement('div');
var addTst = document.getElementById("tst");
addTst.appendChild(newdiv)

 <div id ="tst">
 //new divs will appear here
 </div>

$("#tst  div").draggable(); *//things I need to be draggable*

#tst  div{
height:50px;
width:50px;
background:red;
margin:20px;
display:inline-block;
}

但是我正在尝试使用 Jquery UI 来定位这些新元素并使它们可拖动。 （新的 div 由用户在初始文档加载后添加，无需刷新 Jquery/页面）。 当然，Jquery 只加载一次，因此之后添加的任何内容都无法拖动。

我已经有一些 AJAX，它可以很好地加载数据，但是它很长，我不想重新运行整个 AJAX 函数只是为了刷新父 div 的内容（假设 AJAX 可以用新的内容）。

为了帮助说明，我添加了一个 Fiddle： http://jsfiddle.net/YuGhj/2/

如您所见，第一个红色框拖得很好，但如果您使用按钮添加新子项，则它们不可拖动。

我很可能完全误解了 jquery/AJAX 的工作原理。

TL;DR 简而言之，我需要一种方法来定位在第一页加载后动态添加的元素，并对它们应用拖动功能。我假设我需要以某种方式刷新 div，而不会丢失任何内容。

谢谢！

Answer 1

使用 jQuery 操作 DOM 更容易。下面是创建 div、附加它并在其上调用 draggable 的代码：

$('<div/>').appendTo('#tst').draggable();

演示：http://jsfiddle.net/MvXR3/

很多人似乎误解了选择和绑定的工作原理。当你这样做时：

$("#tst  div").draggable();

这会找到所有匹配"#tst div"的元素在该行执行时并在这些元素上调用draggable()。添加新元素时，需要在新元素上调用draggable()。之前的调用不适用。