Question

包含bootstrap.js后

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

我在控制台中遇到以下错误： 未捕获的TypeError：无法读取属性＆＃39; documentElement＆＃39;为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脚本的snipet。似乎错误始终出现在documentElement部分

的var inDom行中的tooltip函数中

Answer 1

您很可能还有另一个工具提示库（如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" />

然后，您只需将 $（文档）.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/

Answer 2

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

即

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

未捕获的TypeError：无法读取属性＆＃39; documentElement＆＃39;为null

2 个答案: