Uncaught：.draggable不是函数(…)

Question

我不知道这是怎么回事，它已经把我逼疯了。每当我在代码上使用一些断点(如在图像中)并重新加载页面时，一切都正常。但是，如果我关闭开发工具，然后刷新，它会抛出以下错误：“Uncaught：$designa.draggable不是一个函数(…)”。

以下是我的代码和图像：

调试映像：

​

​

我的剧本：

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var $canvas = $("#canvas");
    var canvasOffset = $canvas.offset();
    var offsetX = canvasOffset.left;
    var offsetY = canvasOffset.top;

    var design = [];
    var $design = [];
    var pic = [];

    $.ajax({
      type: 'get',
      url: ('/getCustomizeParts'),
      data: {
      },
      success: function(data) {
        for (var a = 0; a < data.length; a++) {
          design[a] = new Image();
          pic[a] = data[a].partimagePath;
          design[a].src = "images/part/" + pic[a];
          $design[a] = $("#design" + (a + 1));
          //here it threows me the error
          $design[a].draggable({
            helper: 'clone',
          });
          $design[a].data("image", design[a]);
        }
        $canvas.droppable({
          drop: dragDrop,
        });
      }
    });

我已按以下顺序将脚本标记包括在我的页面中

<script src="/Admin/js/jquery-2.2.3.min.js"></script>
<script src="/Admin/js/jquery-ui.min.js"></script>
<script src="/Admin/js/customizeScript.js"></script>

Answer 1

尝试将延迟属性添加到脚本链接中，如下所示：

<script src="/Admin/js/customizeScript.js" defer></script>
// or this for XHTML
<script src="/Admin/js/customizeScript.js" defer="defer"></script>

有关延迟属性的更多信息，请参见这个w3school页面

Answer 2

这很可能是因为您的页面还没有完成加载，所以您的js文件还没有出现，请在文档准备好之后尝试运行您的代码。

您可以通过将代码添加到$(document).ready函数来做到这一点，其中一种方法是：

$(document).ready(function() {
   // your code here
})