Bootstrap 4.2.1 - 无法在“文档”上执行“querySelector”：“javascript:void(0);” 不是有效的选择器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/53921939/
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
Bootstrap 4.2.1 - Failed to execute 'querySelector' on 'Document': 'javascript:void(0);' is not a valid selector
提问by Owaiz Yusufi
I am working on a project which I started building on bootstrap 4.0.0. During this project, I had updated bootstrap regulary whenever the new versions ( 4.1.0 , 4.1.3 ) of bootstrap came and all the things were working perfectly until I have update to bootstrap 4.2.1from there I encountered error in console when ever I click on the document
我正在开发一个项目，该项目开始在bootstrap 4.0.0上构建。在这个项目中，每当引导程序的新版本（ 4.1.0 、 4.1.3 ）出现时，我都会定期更新引导程序，并且所有事情都运行良好，直到我从那里更新到引导程序 4.2.1我在控制台中遇到错误时我点击文档
Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'javascript:void(0);' is not a valid selector.
未捕获的 DOMException：无法在“文档”上执行“querySelector”：“javascript:void(0);” 不是有效的选择器。
I figured out that it occur due to the dropdown because of this error the dropdown does not work. I also checked, that if I am using href="javascript:void(0);", href="#!"the error occur but if i use anchor tag without href or href="#" then it is working fine.
我发现它是由于下拉菜单导致的，因为这个错误下拉菜单不起作用。我还检查过，如果我使用href="javascript:void(0);" , href="#!" 发生错误，但如果我使用没有 href 或 href="#" 的锚标记，则它工作正常。
Note:-I need the solution with href="javascript:void(0);as href="#in the address link does not look pretty and page scrolls up to the top
注意：-我需要带有href="javascript:void(0);的解决方案；因为地址链接中的href="#看起来不太漂亮，页面会向上滚动到顶部
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" href="javascript:void();" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Here is my codepen
这是我的代码笔
采纳答案by Owaiz Yusufi
Here is the solution that works for me
这是对我有用的解决方案
Snippet from Bootstrap 4.1.3
来自 Bootstrap 4.1.3 的片段
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
selector = element.getAttribute('href') || '';
}
try {
return document.querySelector(selector) ? selector : null;
} catch (err) {
return null;
}
},
Replace it from Bootstrap 4.2.1
从 Bootstrap 4.2.1 替换它
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
var hrefAttr = element.getAttribute('href');
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
}
return selector && document.querySelector(selector) ? selector : null;
},
Thanks to PixemWeb github solution
感谢 PixemWeb github 解决方案
For more info here is the link https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715
有关更多信息，请访问https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715
回答by Lucas Fowler
I was having this issue, and a comment on this reported issueclued me into the solution. I was copying the example from the Bootstrap docs, and I had to remove the ID from the parent link, and instead have that ID on the container for the child links, without the aria-labeledby property, and add a reference in the parent link data-target property.
我遇到了这个问题，对这个报告问题的评论让我找到了解决方案。我正在从 Bootstrap 文档中复制示例，我不得不从父链接中删除 ID，而是在子链接的容器上使用该 ID，没有 aria-labeledby 属性，并在父链接中添加一个引用数据目标属性。
This example shows what I was doing, which caused the console errors:
这个例子显示了我在做什么，这导致了控制台错误：
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#" data-toggle="dropdown" id="navToggleCommercial" role="button" aria-haspopup="true" aria-expanded="false">
Commercial
</a>
<div class="dropdown-menu" aria-labelledby="navToggleCommercial">
<a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
</div>
</li>
This is the solution that worked for me:
这是对我有用的解决方案：
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="/Summary/Commercial" data-target="#navToggleCommercial" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Individual
</a>
<div class="dropdown-menu" id="navToggleCommercial">
<a class="dropdown-item" href="/Summary/Dashboard">Dashboard</a>
</div>
</li>
回答by Hardik Kondhiya
=== Change in bootstrap.js v4.2.1 ===
=== bootstrap.js v4.2.1 的变化 ===
Find below block
找到下面的块
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
var hrefAttr = element.getAttribute('href');
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
}
return selector && document.querySelector(selector) ? selector : null;
},
Need to add try and catch exception only as below
只需要添加 try 和 catch 异常如下
Replace
代替
return selector && document.querySelector(selector) ? selector : null;
with
和
try {
return selector && document.querySelector(selector) ? selector : null;
} catch (err) {
return null;
}
=== Change in bootstrap.min.js v4.2.1 ===
=== bootstrap.min.js v4.2.1 的变化 ===
Replace
代替
return e&&document.querySelector(e)?e:null
with
和
try{return e&&document.querySelector(e)?e:null}catch(err){return null;}
回答by vijay kanaujia
getSelectorFromElement: function getSelectorFromElement(element) {
var selector = element.getAttribute('data-target');
if (!selector || selector === '#') {
var hrefAttr = element.getAttribute('href');
//selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
selector = hrefAttr && hrefAttr.indexOf('#') === 0 ? hrefAttr.trim() : '';
}
return (selector && document.querySelector(selector)) ? selector : null;
}
this function through error due to document.querySelector not find id like "#home" so if any string not contain # prefix it through error. so replace this:
由于 document.querySelector 没有找到像 "#home" 这样的 id，所以这个函数通过错误，所以如果任何字符串不包含 # 前缀它通过错误。所以替换这个：
selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
from this
由此
selector = hrefAttr && hrefAttr.indexOf('#') === 0 ? hrefAttr.trim() : '';
回答by Mordecai
A suggestion:
一条建议：
Remove the empty hrefattribute & add cursor:pointerstyle to make A element clickable.
删除空href属性并添加cursor:pointer样式以使 A 元素可点击。
#dropdownMenuLink {
cursor: pointer; /* not necessary for Bootstrap */
color: white /* change if you want */
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js" integrity="sha384-3ziFidFTgxJXHMDttyPJKDuTlmxJlwbSkojudK/CkRqKDOmeSbN6KLrGdrBQnT2n" crossorigin="anonymous"></script>回答by saber tabatabaee yazdi
as others said in comments
正如其他人在评论中所说
This is a bug in Bootstrap 4.2.1 and will be fixed in 4.3.0: github.com/twbs/bootstrap/issues/27903
这是 Bootstrap 4.2.1 中的一个错误，将在 4.3.0 中修复：github.com/twbs/bootstrap/issues/27903
just need to user 4.3.0 of bootstrap
只需要引导程序的用户 4.3.0
just replace this
只需更换这个
<script src="https://cdn.rtlcss.com/bootstrap/v4.3.0/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>
with this
有了这个
<script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>
