未捕获的类型错误：无法读取空值的documentElement属性。

Question

在我引入bootstrap.js之后

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

我在控制台中看到以下错误信息: Uncaught TypeError: Cannot read property 'documentElement' of null

引导程序的折叠功能正常工作，但是控制台会不断地显示这个错误。 在引入bootstrap之前，我已经引入了jquery。

还有其他人遇到过这个问题吗？

编辑：

  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脚本中提取的片段。看起来错误总是出现在tooltip函数中的var inDom行的documentElement部分。

- therabbityouknow

---

错误指向哪一行代码？ - Rory McCrossan

请问您能否添加一个实时演示？ - tmuecksch

Answer 1

您很可能正在使用另一个工具提示库（如JQueryUI / Tooltip），或者正在尝试直接将工具提示附加到文档元素。请查看您的代码，查找类似以下内容的内容：

您很可能仍在使用另一个工具提示库（例如JQueryUI / Tooltip），或者正在尝试直接将工具提示附加到文档元素上。请检查您的代码中是否存在以下内容：

$(document).tooltip

或类似的东西，并将其删除以使事情再次正常工作。一定要检查可能已经存在的每个.tooltip()调用，因为它们很可能不再起作用：您需要手动将它们转移到Bootstrap中才能使它们再次起作用。

如果您想同时保留Bootstrap/Tooltip和JQueryUI/Tooltip（假设这是您的情况），您可以使用$.widget.bridge来手动更改JQueryUI提示插件的名称：

// 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执行相同的操作，以解决完全相同的问题。结果代码将如下所示：

<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 ，以使一切正常运行。

或者，如果您找不到有问题的 JavaScript 代码和 / 或您不想使用 $ .widget.bridge，则始终可以手动修补 bootstrap.js 以避免此类错误。 这可以通过替换以下行（bs 3.3.1 中的＃1384）来完成：

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()调用。

另请参阅：

http://www.ryadel.com/2015/01/03/using-jquery-ui-bootstrap-togheter-web-page/（我在博客上写的一篇文章，更好地解释了这个问题）

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

http://jqueryui.com/tooltip/

- Darkseal

---

我知道是什么导致了我的引导设置出现问题，你的回答让我省去了至少一小时的寻找，非常感谢你的帮助。 - chris loughnane

Answer 2

在初始化之前，检查元素是否为空

即

if($('[data-toggle="tooltip"]') != null)
{
    $('[data-toggle="tooltip"]').tooltip();    
}

- Kinjal Pathak