Question

我不知道这里有什么问题，它已经让我疯了。每当我在代码上使用一些断点时，如在图像中，并重新加载页面，那么一切正常。但是，如果我关闭开发人员工具然后刷新，它会抛出这个错误：'未捕获TypeError：$ design [a] .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

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

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

有关延迟属性

的详情，请参阅this w3school page

Answer 2

这很可能是因为您的网页尚未完成加载，因此您的 js 文件之一尚未存在，请在文档准备好后尝试运行您的代码。

您可以通过将代码添加到 $（document）.ready 函数来实现，其中一种方法如下：

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

未捕获的TypeError：.draggable不是函数（...）

2 个答案: