Bootstrap 4.2.1 - 无法在'Document'上执行'querySelector'：'javascript：void（0）;'不是有效的选择器 [英] Bootstrap 4.2.1 - Failed to execute 'querySelector' on 'Document': 'javascript:void(0);' is not a valid selector

问题描述

我正在开发一个项目，我开始在 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

未捕获DOMException：无法在
'文档上执行'querySelector' '：'javascript：void（0）;'不是有效的选择器。

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'javascript:void(0);' is not a valid selector.

我发现它是由于下拉列表而发生的由于此错误，下拉列表不起作用。我还检查过，如果我使用 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>

这是我的 codepen

推荐答案

这是适用于我的解决方案

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

有关详情，请点击此链接 https：// github。 com / twbs / bootstrap / issues / 27903＃issuecomment-449600715

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）;'不是有效的选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！