Bootstrap 4.2.1 - Failed to execute 'querySelector' on 'Document': '[removed]void(0);' is not a valid selector

前端 未结 7 1534
温柔的废话
温柔的废话 2021-02-13 16:54

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

相关标签:
7条回答
  • 2021-02-13 17:05
    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:

    selector = hrefAttr && hrefAttr !== '#' ? hrefAttr.trim() : '';
    

    from this

    selector = hrefAttr && hrefAttr.indexOf('#') === 0 ? hrefAttr.trim() : '';
    
    0 讨论(0)
  • 2021-02-13 17:08

    I was having this issue, and a comment on this reported issue clued 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.

    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>
    
    0 讨论(0)
  • 2021-02-13 17:08

    Here is the solution that works for me

    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;
        }
    },
    

    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;
    },
    

    Thanks to PixemWeb github solution

    For more info here is the link https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715

    0 讨论(0)
  • 2021-02-13 17:17

    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

    just need to user 4.3.0 of bootstrap

    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>
    
    0 讨论(0)
  • 2021-02-13 17:20

    Make sure that the anchor of the dropdown menu item is # instead of a path.

    Solution: I use to Link instead of an a in React and replace it with simple <a href="#" ... and it is working now.

    0 讨论(0)
  • 2021-02-13 17:24

    === Change in 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

    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 ===

    Replace

    return e&&document.querySelector(e)?e:null
    

    with

    try{return e&&document.querySelector(e)?e:null}catch(err){return null;}
    
    0 讨论(0)
提交回复
热议问题