Как избежать Syntax error, unrecognized expression: #

Question

Есть такой js

$('a[href^="#"]').on('click', function (e) {
        e.preventDefault();
        var hrefAttr = $(this).attr("href");
        parent = $(this).closest("ul");
        parent.find("a").removeClass("active");
        $(this).addClass("active");
        if($(hrefAttr).length == 0) {
            location.href='/'+hrefAttr;
        } else {
            if( hrefAttr.length > 0 && hrefAttr != "#") {
                $('html, body').stop().animate({
                    'scrollTop': $(hrefAttr).offset().top-10
                }, 500);
            }
        }
    });

Если элемент $(hrefAttr) отсутствует то нужно перейти по адресу location.href='/'+hrefAttr и проскролить до $(hrefAttr). Скролит хорошо. Но при клике на такую ссылку

<a href="#" data-popup-link="callback">Заказать звонок</a>

Выдает ошибку

jquery.js?ver=1.0:1586 Uncaught Error: Syntax error, unrecognized expression: #

Из-за этого форма плохо работает

Как это исправить?

Answer 1

Строка # не является допустимым css селектором, поэтому и происходит ошибка.

Для решения достаточно просто проверить, что значение не #.

$('a[href^="#"]').on('click', function(e) {
  e.preventDefault();
  var hrefAttr = $(this).attr("href");
  if (hrefAttr == '#' || $(hrefAttr).length == 0) {
    console.log(1)
  } else {
    console.log(2)
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<a href="#" data-popup-link="callback">Заказать звонок</a>

БЛОГ НА HUSL

Как избежать Syntax error, unrecognized expression: #

Ответы (1 шт):