jQuery 可排序不是一个函数

Question

我正在尝试使用 Sortable jQuery UI 插件版本 1.8.16 制作可单击并拖动的有序项目列表。但是，我不断收到 $("#ol-id ol").sortable 不是函数 的错误，其中 'ol-id' 是列表的 id。我的代码如下：

//Sorting stuff
if($("#li-id li").size()>1) {
    $("#ol-id ol").sortable({
        revert:         true,
        axis:           'y',
        containment:    'parent',
        cursor:         'move',
        handle:         'div.link_div',
        smooth:         false,
        opacity:        0.7,
        tolerance:      'pointer',
        start: function(){
            $("#ol-id").removeClass("bottom_dragged");
        },
        update: function(){
            $("#ol-id ol").sortable({disabled : true});
            $("#saving_indicator").html("saving...")
            $("#saving_indicator").show();
                            //do other stuff...
        }
    })
}

奇怪的是，错误在 Firebug 中显示为与 update: function(){ 在线。

我已经验证在加载页面和加载 jQuery UI 库后会调用此函数。我在标头中包含 jquery-1.6.2.min.js 和 jquery-ui-1.8.16.custom.min.js 。此外，我已验证所有 ID 名称均正确且与其 HTML 对应项相匹配。

那么，如果不是缺少与资源相关的东西，那么是什么导致了问题呢？

编辑：这是我的 HTML 标头：

<link href="/_css/styles.css?mod=1317745564" type="text/css" rel="stylesheet">
<link href="/_javascript/qtip/jquery.qtip.min.css?mod=1315947301" type="text/css" rel="stylesheet">
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js">
<script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/le-frog/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js" type="text/javascript">
<script src="/_javascript/sets.js?mod=1320080042" type="text/javascript"> //Sorting stuff code is here
<script type="text/javascript" src="http://dev.selfcheck.vudat.msu.edu/_javascript/jquery.jsonp.js">
<script type="text/javascript" src="http://dev.selfcheck.vudat.msu.edu/_javascript/jquery.form.js">
<script type="text/javascript" src="http://dev.selfcheck.vudat.msu.edu/_javascript/qtip/jquery.qtip.min.js">
<link href="/_css/ui/ui.core.css?mod=1315947279" type="text/css" rel="stylesheet">
<link href="/_css/ui/ui.theme.css?mod=1315947280" type="text/css" rel="stylesheet">

Answer 1

jQuery UI 和 jQuery 必须按特定顺序加载：

<script src="jquery.js">...
<script src="jquery-ui.js">...

确保在 jQuery 之后包含 jQuery UI。

Answer 2

所以不确定这是否会对任何人有帮助，但我遇到了类似的情况，我能够解决。 时，似乎会发生这种情况

因此，当a) 加载 jQuery-ui 和 jQuery 的顺序错误

。 b) jQuery 被多次包含，或者包含不同的版本。

选项“b”发生在我身上，因为我使用的是引导模板，其中 jQuery 包含在文档的底部，这当然是最佳实践，而我正在测试的代码在文档的顶部添加了不同版本的 jQuery页面。

我发现这个问题的代码看起来包含许多重复项，所以我建议首先清理它。

Answer 3

我遇到了同样的问题，这是因为页面底部包含另一个 js 文件，该文件具有一些 jQuery 函数。当我将其移至页面顶部、位于 jQuery 和 jQuery-UI 上方时，一切都运行良好。

Answer 4

我的问题是我使用 jQuery(...).sortable() 而不是 $(...).sortable()

不知道为什么这很重要，但正在改变它到 $ 修复它。

Answer 5

我找到了新的解决方案，
只需在第 551 行编辑 acf.php 文件

旧

 'deps'      => array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker', 'underscore', 'select2'),

新

 'deps'      => array('jquery', 'jquery-ui-core', 'jquery-ui-datepicker', 'jquery-ui-sortable', 'underscore', 'select2'),

我刚刚在数组中添加了jquery-ui-sortable
我希望能帮助某人
谢谢。