javascript - 未捕获的类型错误 : Cannot read property 'documentElement' of null

Question

在我包含 bootstrap.js 后

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

我在控制台中收到以下错误:未捕获类型错误:无法读取 null 的属性“documentElement”

Boot 折叠工作正常，但控制台收到此错误的垃圾邮件。我在 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 脚本的一个片段。看来错误总是出现在 documentElement 部分 var inDom 行的工具提示函数中

Answer 1

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

$(document).tooltip

或类似的东西，并将其删除以使事情再次正常工作。请务必检查您可能已经拥有的所有其他 .tooltip() 调用，因为它们很可能不再工作:您需要手动将它们移植到 Bootstrap 以便使它们再次工作.

如果您想同时保留 Bootstrap/Tooltip 和 JQueryUI/Tooltip(假设这是您的场景)，您可以使用 $.widget.bridge strong> 手动更改 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 即可使一切正常运行。

或者，如果您没有找到有问题的 js 代码和/或您不想使用 $.widget.brige，您可以随时手动修补 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/