javascript 未捕获的类型错误:无法读取null的属性'documentElement'

ni65a41a  于 2022-11-20  发布在  Java
关注(0)|答案(2)|浏览(136)

在我包含bootstrap.js之后

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

控制台中出现以下错误:未捕获的类型错误:无法读取空的属性“documentElement”
引导崩溃工作得很好,但是控制台收到了这个错误的垃圾邮件。我已经在引导之前包含了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行的工具提示函数中

gudnpqoy

gudnpqoy1#

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

$(document).tooltip

或者类似的东西,并删除它,以使事情再次工作。一定要检查每一个其他的**.tooltip()调用,你可能已经有,因为他们很可能不再工作:您需要手动将它们移植到Bootstrap以使它们再次工作。
如果希望同时保留
Bootstrap/TooltipJQueryUI/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**,就可以使一切正常工作。
或者,如果你没有找到有问题的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/

sczxawaw

sczxawaw2#

在初始化元素之前检查它是否为空
也就是说

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

相关问题