Javascript Jquery UI 错误 - f.getClientRects 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37914869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery UI error - f.getClientRects is not a function
提问by matveytn
I'm trying to make Jquery UI work, but it doesn't. Here's what happens. I'm loading dependencies:
我试图让 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>
That's my main.jsfile:
这是我的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");
}
}
});
});
When I run the code in Brackets Jquery UI is loaded but doesn't work, however, when I comment my main.js file out and then bring it back that's the error I get in the console and UI is suddenly working. It's extremely weird.
当我在 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
I've found this thread discussing the issue but still wasn't able to fix it.
我发现这个线程讨论了这个问题，但仍然无法解决它。
Cheers.
干杯。
回答by Vin Shahrdar
What version is your jQuery UI? I had the same issue with jQuery UI 1.11.4 and jquery 3.0. After installing jQuery UI 1.12.0-rc.2, the problem was fixed.
你的 jQuery UI 是什么版本？我在 jQuery UI 1.11.4 和 jquery 3.0 上遇到了同样的问题。安装 jQuery UI 1.12.0-rc.2 后，问题得到解决。
回答by Mikee
Adding the jQuery 3 Migrate Pluginresolves this issue as noted here, updated UI will be coming out soon.
添加jQuery的3迁移插件可以解决这个问题，因为提到这里，更新的用户界面将很快出来。
NOVEMBER 5, 2018 UPDATE
2018 年 11 月 5 日更新
If using latest jQuery and jQuery UI , use latest jQuery migrateto prevent compatibility warnings/issues.
如果使用最新的 jQuery 和 jQuery UI，请使用最新的 jQuery migrate以防止出现兼容性警告/问题。
回答by Ravi Rajan
Turns out this is a compatibility between jQuery 3.x.x and jQueryUI prior to 1.12.0.
原来这是 jQuery 3.xx 和 jQueryUI 1.12.0 之前的兼容性。
including below script resolved the issue for me.
包括下面的脚本为我解决了这个问题。
回答by TheWizardOfTN
After doing all of the updates and STILL having the problem, I just fixed it in the code:
在完成所有更新并且仍然存在问题之后，我只是在代码中修复了它：
Look for this:
寻找这个：
if ( !elem.getClientRects().length ) {
return { top: 0, left: 0 };
}
Enter this just before it:
在它之前输入：
if (!elem.getClientRects()) {
return { top: 0, left: 0 };
}
回答by Eben
I updated our legacy site, from jquery 1.12 to jquery 3.5 and hit this same problem. The site is using jquery-ui 1.10 but sadly updating to jquery-ui 1.12 broke other things so I couldnt use that option. Running the production site with the migration plugin felt wrong so instead I looked how this problem was fixed in jquery-ui 1.12.
我更新了我们的旧网站，从 jquery 1.12 到 jquery 3.5 并遇到了同样的问题。该网站正在使用 jquery-ui 1.10，但遗憾的是更新到 jquery-ui 1.12 破坏了其他东西，所以我无法使用该选项。使用迁移插件运行生产站点感觉不对，所以我查看了 jquery-ui 1.12 中如何修复此问题。
Patching jquery-ui 1.10 with the fix from jquery-ui github "Position: Guard against passing window to Offset"worked for me.
使用 jquery-ui github 中的修复程序修补 jquery-ui 1.10 “位置：防止将窗口传递给偏移量”对我有用。
This is an old post, but if someone like me need to update legacy sites, maybe this information can be useful.
这是一篇旧帖子，但如果像我这样的人需要更新旧网站，也许这些信息会有用。
回答by Slawa
> npm remove jqueryui
> npm i -S jquery-ui-dist
This will download a version of JQuery UI which can be included directly with <script>tags.
这将下载一个可以直接包含在<script>标签中的 JQuery UI 版本。
回答by TNG.Dei
I had the same problem when I was trying to get X and Y position of the mouse using " .pageX/.pageY " on a click event.
当我试图在点击事件上使用“.pageX/.pageY”获取鼠标的 X 和 Y 位置时，我遇到了同样的问题。
Try to change the source of the libraries in order to get the latest update of them, making sure that they are compatible.
尝试更改库的来源以获得它们的最新更新，确保它们兼容。
Those links are now working and they could fix the issues.
这些链接现在正在工作，他们可以解决问题。
