未捕获的TypeError:无法读取null的属性'documentElement' [英] Uncaught TypeError: Cannot read property 'documentElement' of null

问题描述

在我包含bootstrap.js之后

After i include the bootstrap.js

<script type="text/javascript" src="/js/bootstrap/js/bootstrap.js"></script>

我在控制台中出现以下错误: 未捕获的TypeError:无法读取null的属性"documentElement"

I get followning error in the console: Uncaught TypeError: Cannot read property 'documentElement' of null

靴子折叠工作正常，但控制台收到此错误的垃圾邮件. 我在引导程序之前加入了jQuery.

The boots collapse works just fine but the console get spammed this error. I have included jquery before bootstrap.

其他人以前有这个问题吗?

Anyone else had this problem before?

  Tooltip.prototype.show = function () {
var e = $.Event('show.bs.' + this.type)

if (this.hasContent() && this.enabled) {
  this.$element.trigger(e)

  var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
  if (e.isDefaultPrevented() || !inDom) return
  var that = this

这是bootstrap.js脚本的摘录. 似乎错误总是出现在documentElement部分的var inDom行中的工具提示函数中

this is a snipet from the bootstrap.js script. It seems the error comes always in the tooltip function in the var inDom line at the documentElement part

推荐答案

您很可能仍在使用另一个工具提示库(例如JQueryUI/Tooltip)，或者您尝试将工具提示直接附加到文档元素.请调查您的代码，例如:

You most likely have another tooltip library still in use (like JQueryUI/Tooltip) OR you're trying to attach a tooltip directly to the document element. Please look into your code for something like:

$(document).tooltip

或类似的东西，然后将其删除，以使事情再次正常进行.确保复查您可能已经遇到的所有其他 .tooltip()调用，因为它们很可能不再起作用:您需要手动将它们移植到Bootstrap以便再次使它们起作用

or something like that, and remove it in order to make things work again. Be sure to review every other .tooltip() call you might already have, since they'll most likely not work anymore: you'll need to manually port them to Bootstrap in order to make them work again.

如果您想同时保留 Bootstrap/Tooltip 和 JQueryUI/Tooltip (假设是您的情况)，则可以使用 $.widget.bridge 手动更改JQueryUI工具提示插件名称:

If you want to keep both Bootstrap/Tooltip and JQueryUI/Tooltip (assuming that's your scenario), you can use $.widget.bridge to manually change the JQueryUI tooltip plugin name:

// Change JQueryUI/tooltip plugin name to 'uitooltip' to fix name collision with Bootstrap/tooltip
$.widget.bridge('uitooltip', $.ui.tooltip);

您需要在导入JQueryUI js文件之后并在导入Bootstrap js文件之前进行此操作:在您这样做的同时，我还建议您对button/uibutton进行相同的操作以解决完全相同的问题.结果代码将如下所示:

You need to to this AFTER importing the JQueryUI js file and BEFORE importing the Bootstrap js file: while you're at it I also suggest you to do the same with button/uibutton to solve the exact same problem. The result code will look like that:

<script type="text/javascript" src="path/to/jqueryui.js" />
<script type="text/javascript">
// Change JQueryUI plugin names to fix name collision with Bootstrap:
$.widget.bridge('uitooltip', $.ui.tooltip);
$.widget.bridge('uibutton', $.ui.button);
</script>
<script type="text/javascript" src="path/to/bootstrap.js" />

然后，您只需将 $(document).tooltip 调用重新路由到 $(document).uitooltip ，即可使所有工作正常进行.

Then you can just re-route your $(document).tooltip call to $(document).uitooltip to make everything work.

或者，如果您没有找到有问题的js代码和/或不想使用$ .widget.brige，则可以随时手动修补 bootstrap.js 以避免这种情况错误.可以通过替换以下行(bs 3.3.1中的#1384)来完成此操作:

Alternatively, if you don't find the offending js code and/or you don't want to use $.widget.brige, you can always manually patch bootstrap.js to avoid this kind of error. This can be done by replacing the following line (#1384 in bs 3.3.1):

var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])

有这行:

var inDom = $.contains((this.$element[0].ownerDocument || this.$element[0]).documentElement, this.$element[0])

请记住，在您的代码中，仍然会有一个断掉的.tooltip()调用.

Keep in mind, tho, that you'll still have a broken .tooltip() call in your code somewhere.

另请参阅:

http://www.ryadel.com/2015/01/03/using-jquery-ui-bootstrap-togheter-web-page/(我在博客上写的一篇文章，旨在更好地说明问题)

http://www.ryadel.com/2015/01/03/using-jquery-ui-bootstrap-togheter-web-page/ (an article I wrote on my blog to better explain the issue)

https://github.com/twbs/bootstrap/issues/14483

http://jqueryui.com/tooltip/

这篇关于未捕获的TypeError:无法读取null的属性'documentElement'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！