未捕获的类型错误：.draggable 不是函数（…）答案

【问题标题】：Uncaught TypeError: .draggable is not a function(…)未捕获的类型错误：.draggable 不是函数（…）
【发布时间】：2016-12-28 21:02:08
【问题描述】：

我不知道这里出了什么问题，它已经把我逼疯了。每当我在代码上使用一些断点（如图所示）并重新加载页面时，一切正常。但是如果我关闭开发者工具然后刷新，它会抛出这个错误：'Uncaught TypeError: $design[a].draggable is not a function(...)'。

以下是我的代码和图片：

调试图片：

我的脚本：

    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>

【问题讨论】：

这个错误的一个常见原因是加载了多个版本的 jQuery。
@Barmar 非常感谢你，我认为这是现在加载正常的问题

标签： javascript jquery jquery-ui draggable

【解决方案1】：

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

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

有关 defer 属性的更多信息，请参阅 this w3school page

【讨论】：

如果问题是找不到 DOM 元素，这很有用。但错误在于找不到函数。
没有找到另一个脚本标签提供的功能，这种情况下等待其他脚本标签完成渲染会很有用，你不这么认为吗？
脚本默认同步加载。所以第三个脚本在第二个脚本完成加载之前不会运行。
你说它“加载”，而不是执行。所以库中的一些函数还没有准备好使用（执行还没有到达），所以如果第三个标签中的脚本使用了一个尚未注册的函数（竞速条件），它将抛出一个类似的错误。
加载脚本会执行它。没有竞争条件，都是同步的。

【解决方案2】：

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

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

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

【讨论】：

不，我搜索了互联网并使用了这个，但没有用。
据我所知，您将代码分隔在一个文件中。您是否尝试将整个文件内容放在 document.ready 函数中？
使用<script>加载的脚本是同步加载的，除非你使用async属性，所以你不需要使用$(document).ready()来等待脚本加载。这只需要等待 DOM 元素。
可以，但是如果不存在async关键字，会在js文件加载的时候直接执行文件的内容，所以如果之前的文件比较大（就是这种情况下）它可能还没有执行！所以我认为等到文件准备好更安全
第一个和第二个JS文件执行完毕后，第三个JS文件才会被执行。如果你不能依赖它，那么你就不能使用$(document).ready()，因为这需要完全加载jquery。