web-dev-qa-db-ja.com

JQuery UIエラー-f.getClientRectsは関数ではありません

Jquery UIを機能させようとしていますが、うまくいきません。ここで何が起こるかです。私は依存関係をロードしています：

<script src="assets/src/js/angular/angular.js"></script>
<script src="assets/src/js/angular-animate/angular-animate.js"></script>
<script src="assets/src/js/angular-route/angular-route.js"></script>
<script src="assets/src/js/jquery/dist/jquery.js"></script>
<script src="assets/src/js/jquery-ui/jquery-ui.js"></script>
<script src="assets/src/js/app.js"></script>
<script src="assets/src/js/main.js"></script>

それは私のmain.jsファイルです：

$(function () {
    $("input[type=submit]")
        .button()
        .click(function (event) {
            event.preventDefault();
        });
});


$(function () {
    $("#circum").buttonset();
});

$(function () {
    $("#dialog-message").dialog({
        modal: true,
        buttons: {
            Ok: function () {
                $(this).dialog("close");
            }
        }
    });
});

Bracketsでコードを実行すると、Jquery UIが読み込まれますが機能しませんが、main.jsファイルをコメントアウトして戻すと、コンソールでエラーが発生し、UIが突然動作します。それは非常に奇妙です。

jQuery.Deferred exception: elem.getClientRects is not a function TypeError: elem.getClientRects is not a function
at jQuery.offset (http://127.0.0.1:27530/assets/src/js/jquery/dist/jquery.js:9779:14)
at Object.getWithinInfo (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1157:26)
at jQuery.$.fn.position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:1179:23)
at _position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8709:17)
at ._position (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8334:8)
at .open (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:8210:9)
at ._init (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:415:25)
at _createWidget (http://127.0.0.1:27530/assets/src/js/jquery-ui/jquery-ui.js:587:8) undefined

私はこのスレッドが問題について議論しているのを見つけましたが、それでもそれを修正することができませんでした。

Github

乾杯。

javascriptjqueryjquery-ui
46
matveytn

JQuery UIのバージョンは何ですか？ jQuery UI 1.11.4とjquery 3.0でも同じ問題が発生しました。 jQuery UI 1.12.0-rc.2をインストールした後、問題は修正されました。

64
Vin Shahrdar

jQuery 3 Migrate Plugin を追加すると、指摘されているようにこの問題は解決されます here 、更新されたUIは間もなく公開されます。

2018年11月5日更新

最新のjQueryおよびjQuery UIを使用している場合は、 latest jQuery migrate を使用して、互換性の警告/問題を回避します。

33
Mikee

これは、jQuery 3.x.xと1.12.0より前のjQueryUIとの互換性であることがわかりました。

以下のスクリプトを含めることで問題が解決しました。

https://code.jquery.com/jquery-migrate-3.0.0.min.js

10
Ravi Rajan
> npm remove jqueryui
> npm i -S jquery-ui-dist

これにより、<script>タグに直接含めることができるJQuery UIのバージョンがダウンロードされます。

0
Slawa

すべての更新を行った後も問題が発生した後、コードで修正しました。

これを探してください：

if ( !elem.getClientRects().length ) {
    return { top: 0, left: 0 };
}

その直前に入力してください：

if (!elem.getClientRects()) {
    return { top: 0, left: 0 };
}
0
TheWizardOfTN