问题描述
我正在开发一个项目,我开始在 bootstrap 4.0.0 上构建。在这个项目期间,每当新版本(4.1.0,4.1.3)的bootstrap出现并且所有的东西都完美运行之后我都会定期更新bootstrap,直到我从那里更新 bootstrap 4.2.1 我点击文档时在控制台中遇到错误
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.1 from there I encountered error in console when ever I click on the document
我发现它是由于下拉列表而发生的由于此错误,下拉列表不起作用。我还检查过,如果我使用 href =javascript:void(0);, href =#!,则会出现错误,但如果我使用的是锚标记没有href或href =#那么它工作正常。
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 =#看起来不漂亮,页面滚动到顶部
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
<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 the solution that works for me
Bootstrap 4.1.3的片段
Snippet from 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;
}
},
将其替换为Bootstrap 4.2.1
Replace it from 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;
},
感谢PixemWeb github解决方案
Thanks to PixemWeb github solution
有关详情,请点击此链接
For more info here is the link https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715
这篇关于Bootstrap 4.2.1 - 无法在'Document'上执行'querySelector':'javascript:void(0);'不是有效的选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!