如果 Ajax 创建的可拖动 div 不起作用

Question

我正在使用 jQuery 和 Ajax 将一堆 div 加载到可滚动的 div ("letterHolder"):

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>

<script type="text/javascript">
$.ajax({
  url: "myphpscript.php",
  dataType: "json",   
  success: function(result) {
    $(".letterHolder").html(result['letter_array']);
  }
});
</script>
</head>

<body>

<div class="letterHolder">
</div>

</body>
</html>

PHP 脚本从数据库中检索文件名列表并将它们加载到 letterHolder 中，因此它最终看起来像这样：

<div class="letterHolder">
  <div class="drag_letter">file1</div>
  <div class="drag_letter">file2</div>
  <div class="drag_letter">file3</div>
  etc.
</div>

现在，我想让这些文件名 divs 可拖动，但这不起作用：

$(".drag_letter").draggable({
 cursor: 'move',
 revert: true,
 helper: 'clone'   
});

把可拖拽的代码放在页眉里不行，把代码放在页尾也不行

在我尝试使用 Ajax.

创建 div 之前，它运行良好

Answer 1

我认为这在您使用 AJAX 之前有效但不适用于 AJAX 的原因是因为您调用 draggable() 时使用的元素选择器是尚未在 DOM 中。如果在收到 AJAX 结果并将元素附加到 DOM 后对元素调用 draggable() 它应该可以工作。

Answer 2

使用 jQuery 或 java 脚本 append() 函数将 DOM 添加到元素中而不是 html()
在追加元素后添加draggable

您应该发送文件名 file1... file2... 作为 Json 数组来自服务器

并重写：

<script type="text/javascript">
$.ajax({
    url: "myphpscript.php",
    dataType: "json",
    success: function(result) {
        $.each(result,function(k,v){
            $(".letterHolder").append($('<div></div>').html(v).addClass('drag_letter').draggable({
                cursor: 'move',
                revert: true,
                helper: 'clone'
            }));
        });
    }
});
</script>

如果 Ajax 创建的可拖动 div 不起作用

Draggable divs not working if created by Ajax

php

ajax

jquery

draggable