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

Question

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

Answer 1

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

无论如何,长话短说 - >将$().draggable()设置放在一个函数中,然后在创建新元素DID WORK之后调用该函数,但是我不得不把它从document ready函数中解脱出来.....在我禁用它之后,它起作用了.

您可以多次调用该函数,并在每个创建的元素之后继续工作.似乎它在document.ready声明中然后是一个1枪的交易..

希望有所帮助.

Answer 2

在将新创建的元素插入DOM之后,需要调用draggable().

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