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>

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

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

如果我将可拖动代码放入页眉中，它就不起作用，如果我把代码放在页面末尾也不行。

在我尝试使用Ajax创建div之前，这工作正常。

Answer 1

我假设你在使用AJAX之前工作的原因，但是没有使用AJAX，是因为你正在使用一个选择器来调用draggable()，而这些元素还没有在DOM中。如果在收到AJAX结果后将元素调用draggable()并将元素附加到DOM，它应该可以工作。

Answer 2

使用jQuery或java脚本document.getElementById("outputUser").value="Seven";函数将DOM添加到元素中而不是html（）
在追加元素后添加append()

您应该发送文件名，如draggable ... file1 ...作为Json数组从服务器

并重写：

file2

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

2 个答案: