twitter-bootstrap 未捕获的类型错误：无法读取 null 的属性“documentElement”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27482695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'documentElement' of null
提问by therabbityouknow
After i include the bootstrap.js
在我包含 bootstrap.js 之后
<script type="text/javascript" src="/js/bootstrap/js/bootstrap.js"></script>
I get followning error in the console: Uncaught TypeError: Cannot read property 'documentElement' of null
我在控制台中收到以下错误： Uncaught TypeError: Cannot read property 'documentElement' of null
The boots collapse works just fine but the console get spammed this error. I have included jquery before bootstrap.
靴子折叠工作正常，但控制台收到此错误的垃圾邮件。我在引导之前包含了 jquery。
Anyone else had this problem before?
其他人以前遇到过这个问题吗？
Edit:
编辑：
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
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
这是来自 bootstrap.js 脚本的片段。似乎错误总是出现在 documentElement 部分的 var inDom 行中的工具提示函数中
回答by Darkseal
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:
您很可能还有另一个工具提示库仍在使用（如 JQueryUI/Tooltip），或者您正尝试将工具提示直接附加到文档元素。请查看您的代码，例如：
$(document).tooltip
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.
或类似的东西，并删除它以使事情再次工作。请务必查看您可能已经拥有的所有其他.tooltip()调用，因为它们很可能不再起作用：您需要手动将它们移植到 Bootstrap 以使它们再次起作用。
If you want to keep both Bootstrap/Tooltipand JQueryUI/Tooltip(assuming that's your scenario), you can use $.widget.bridgeto manually change the JQueryUI tooltip plugin name:
如果您想同时保留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);
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:
在导入 JQueryUI js 文件和导入 Bootstrap js 文件之前，您需要这样做：当您在使用它时，我还建议您对按钮/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" />
Then you can just re-route your $(document).tooltipcall to $(document).uitooltipto make everything work.
然后您可以将您的$(document).tooltip调用重新路由到$(document).uitooltip以使一切正常。
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.jsto avoid this kind of error. This can be done by replacing the following line (#1384 in bs 3.3.1):
或者，如果您没有找到有问题的 js 代码和/或您不想使用 $.widget.brige，您可以随时手动修补bootstrap.js以避免此类错误。这可以通过替换以下行（bs 3.3.1 中的#1384）来完成：
var inDom = $.contains(this.$element[0].ownerDocument.documentElement, this.$element[0])
with this line:
用这一行：
var inDom = $.contains((this.$element[0].ownerDocument || this.$element[0]).documentElement, this.$element[0])
Keep in mind, tho, that you'll still have a broken .tooltip() call in your code somewhere.
请记住，您的代码中的某处仍然会出现损坏的 .tooltip() 调用。
See also:
也可以看看：
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)
http://www.ryadel.com/2015/01/03/using-jquery-ui-bootstrap-togheter-web-page/（我在我的博客上写的一篇文章来更好地解释这个问题）
https://github.com/twbs/bootstrap/issues/14483
回答by Kinjal Pathak
Check whether the element is null before initialising it
在初始化之前检查元素是否为空
i.e.
IE
if($('[data-toggle="tooltip"]') != null)
{
$('[data-toggle="tooltip"]').tooltip();
}
