带有指向锚点的链接的href引发jQuery错误

时间:2018-06-28 22:38:38

标签: javascript jquery anchor

从网站的主导航链接from this page到我的homepage时,出现此错误:

`Uncaught Error: jquery-1.9.1.min.js:4 Uncaught Error: Syntax error, 
unrecognized expression: ../index.php#home
at Function.st.error (jquery-1.9.1.min.js:4)
at ft (jquery-1.9.1.min.js:4)
at wt (jquery-1.9.1.min.js:4)
at Function.st [as find] (jquery-1.9.1.min.js:4)
at init.find (jquery-1.9.1.min.js:4)
at new init (jquery-1.9.1.min.js:3)
at b (jquery-1.9.1.min.js:3)
at HTMLAnchorElement.<anonymous> (main.js:201)
at Function.each (jquery-1.9.1.min.js:3)
at init.each (jquery-1.9.1.min.js:3)`

以下是一些链接:

<a href='../index.php#home'><span>Home</span></a>
<a href="../index.php#about"><span>About</span></a>
<a href="../index.php#work"><span>Work</span></a>

链接正常工作,并且跳转到页面之间的不同部分,但是JavaScript错误困扰着我。

我还是JavaScript和jQuery的新手,但是我正在努力学习并变得精通。我还没在那里。我猜这是因为链接中包含“#”,而jQuery不喜欢它,但是对引起它的原因以及如何解决它的任何想法都将不胜感激。

2 个答案:

答案 0 :(得分:0)

当我快速单击导航时,在控制台中看到以下错误:

Uncaught ReferenceError: $target is not defined
    at HTMLAnchorElement.<anonymous> (main.js:31)
    at HTMLAnchorElement.dispatch (jquery-1.9.1.min.js:3)
    at HTMLAnchorElement.v.handle (jquery-1.9.1.min.js:3)

即使在堆栈跟踪中引用了jquery,此错误也独立于jQuery发生,并且是JavaScript中的错误-在此处详细了解此错误:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Not_defined

您可以从下至上读取此特定的堆栈跟踪-因此您将看到事件是在jquery-1.9.1.min.js第3行中处理和调度的(缩小资源中的行在大多数情况下是无用的)然后main.js中的一个匿名函数被调用并在第31行崩溃。

此行的摘录如下:

$('a[href^="#"]').on('click', function (e) {
  e.preventDefault();
  $(document).off("scroll");

  $('a').each(function () {
    $(this).removeClass('active');
  })
  $(this).addClass('active');

  var target = this.hash;
  $target = $(target); # this is line 31
  $('html, body').stop().animate({
    'scrollTop': $target.offset().top+2
  }, 500, 'swing', function () {
    window.location.hash = target;
    $(document).on("scroll", onScroll);
  });
});

在您的情况下,您似乎只是错过了声明变量$target的机会。只需将var放在$target前面,例如:

var $target = $(target);

您的功能应该运行良好。

顺便说一下,有一种不错的调试方法。只需在错误发生的位置附近添加一个debugger;表达式,您将看到深入的调试信息。喜欢:

Debug output


添加:

如果您检查其他错误,则:

Uncaught Error: jquery-1.9.1.min.js:4 Uncaught Error: Syntax error, 
unrecognized expression: ../index.php#home
at Function.st.error (jquery-1.9.1.min.js:4)
at ft (jquery-1.9.1.min.js:4)
at wt (jquery-1.9.1.min.js:4)
at Function.st [as find] (jquery-1.9.1.min.js:4)
at init.find (jquery-1.9.1.min.js:4)
at new init (jquery-1.9.1.min.js:3)
at b (jquery-1.9.1.min.js:3)
at HTMLAnchorElement.<anonymous> (main.js:201)
at Function.each (jquery-1.9.1.min.js:3)
at init.each (jquery-1.9.1.min.js:3)

在跟踪中实际上是问题开始的地方at HTMLAnchorElement.<anonymous> (main.js:201)。通常,您可以预料到该错误很少,很少出现在jQuery中。更多情况是您的输入在此处崩溃。

以您为例。让我们检查main.js:201:

  //nav-active
  function onScroll(event){
    var scrollPosition = $(document).scrollTop();
    $('.menu-list a').each(function () {
      var currentLink = $(this);
      var refElement = $(currentLink.attr("href")); # this is line 201
      if (refElement.position().top <= scrollPosition && refElement.position().top + refElement.height() > scrollPosition) {
        $('.menu-list a').removeClass("active");
        currentLink.addClass("active");
      }
      else{
        currentLink.removeClass("active");
      }
    });
  }

让我们看一下第201行:

var refElement = $(currentLink.attr("href"));

我们显然可以从错误消息中检查currentLink.attr("href")中的内容-../index.php#home-因此,您正在尝试使用以下选择器创建元素:{{1} }而是我想您正在尝试做$('../index.php#home')-如果是这样,只需像这样更新您的代码段即可:

$('#home')

答案 1 :(得分:0)

  

它看起来好像您的jquery库未加载,您正在尝试使用   库,然后再加载。

尝试包括在下面的head元素中。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>