Bootstrap 4.2.1 - Не удалось выполнить querySelector для "Документа": "javascript: void (0);" не является действительным селектором

Я работаю над проектом, который я начал строить на начальной загрузке 4.0.0. Во время этого проекта я обновлял правила начальной загрузки всякий раз, когда приходили новые версии (4.1.0, 4.1.3) начальной загрузки, и все работало отлично, пока у меня не появилось обновление до начальной загрузки 4.2.1. Я когда-либо сталкивался с ошибкой в консоли Я нажимаю на документ

Uncaught DOMException: не удалось выполнить 'querySelector' для 'Document': 'javascript: void (0);' не является действительным селектором.

Я понял, что это происходит из-за выпадающего из-за этой ошибки выпадающий не работает. Я также проверил, что если я использую href= "javascript: void (0);" , href= "#!" ошибка возникает, но если я использую тег привязки без href или href= "#", то он работает нормально.

Примечание: - Мне нужно решение с помощью 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>

Вот мой кодекс

Ответы

Ответ 1

Вот решение, которое работает для меня

Фрагмент из 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

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

Для получения дополнительной информации здесь есть ссылка https://github.com/twbs/bootstrap/issues/27903#issuecomment-449600715

Ответ 2

У меня была эта проблема, и комментарий к этой сообщенной проблеме подсказал мне решение. Я копировал пример из документации Bootstrap, и мне пришлось удалить идентификатор из родительской ссылки, а вместо этого иметь этот идентификатор в контейнере для дочерних ссылок без свойства aria-labeleledby и добавить ссылку в родительскую ссылку свойство цели данных.

Этот пример показывает, что я делал, что вызвало ошибки консоли:

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

Это решение, которое работает для меня:

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

Ответ 3

Предложение:

Удалите пустой атрибут href и добавьте cursor:pointer стиль cursor:pointer чтобы сделать элемент "кликабельным".

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

Ответ 4

=== Изменения в bootstrap.js v4.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;
},

Нужно добавить попробовать и поймать исключение только как ниже

замещать

return selector && document.querySelector(selector) ? selector : null;

try {
    return selector && document.querySelector(selector) ? selector : null;
} catch (err) {
    return null;
}

=== Изменение в bootstrap.min.js v4.2.1 ===

замещать

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

try{return e&&document.querySelector(e)?e:null}catch(err){return null;}