web-dev-qa-db-ja.com

jQueryのsortableは関数ではありません

Sortable jQuery UIプラグインバージョン1.8.16を使用して、アイテムの順序付きリストをクリックアンドドラッグ可能にしようとしています。ただし、$("#ol-id ol").sortable is not a functionというエラーが発生し続け、「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...
        }
    })
}
_

奇妙なことに、エラーはupdate: function(){の行にあるものとしてFirebugに表示されます。

この関数は、ページが読み込まれ、jQueryUIライブラリが読み込まれた後に呼び出されることを確認しました。ヘッダーに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">
_
javascriptjquery-uisortingjquery-ui-sortable
9
CodeRedd

jQuery UIとjQueryは、特定の順序でロードする必要があります。

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

JQueryの後にjQueryUIが含まれていることを確認してください。

14
Blender

ですから、これが誰かに役立つかどうかはわかりませんが、私は同じような状況に遭遇し、それを解決することができました。したがって、これは次のいずれかの場合に発生するようです

a）jQuery-uiとjQueryをロードする順序が間違っています。

b）jQueryが複数回含まれているか、異なるバージョンが含まれています。

オプション「b」は、bootstrapテンプレートを使用していたために発生しました。ここで、jQueryはドキュメントの下部に含まれています。これはもちろんベストプラクティスですが、テスト中のコードは追加されましたページ上部にある別のバージョンのjQuery。

この質問のコードには重複が多数含まれているように見えるので、最初にクリーンアップすることをお勧めします。

7
IonicBurger

私は同じ問題を抱えていました、そしてそれはいくつかのjQuery関数を持っていた別のjsファイルがページの下部に含まれていたためでした。これをページの上部に移動すると、jQueryとjQuery-UIのインクルードの上で、すべてがうまく機能します。

6
Eric Antoine Scuccimarra

私の問題は、$（...）。sortable（）の代わりにjQuery（...）。sortable（）を使用していたことでした

それが重要な理由はわかりませんが、$に変更すると修正されました。

0
Brett Pennings