javascript - 即使使用正确的选择器，jquery click 事件也不会触发？

Question

我并不是真正的 jquery 专家，所以请耐心等待。我已经“谷歌搜索”但找不到任何解决方案。这是代码:

<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
<ul id="primary-menu" class="navbar-nav text-uppercase">
  <li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item"><a href="#page-top" class="nav-link js-scroll-trigger">Home</a></li>
  <li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
  <li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item"><a href="#portfolio" class="nav-link js-scroll-trigger">Portfolio</a></li>
  <li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item"><a href="#about" class="nav-link js-scroll-trigger">About</a></li>
</ul>

这是脚本/片段的部分:

(function($) {
  "use strict"; // Start of use strict
  $('a.nav-link.js-scroll-trigger').click(function(e) {
    console.log(e);
  });
  $('.js-scroll-trigger').on('click', 'a', function(e) {
    console.log(e);
  });
  $('li').find('a.js-scroll-trigger').click(function(e) {
    console.log(e);
  });
  $('a').click(function(e) {
    console.log(e);
  });

  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
    if (location.pathname.replace(/^\//, '') ==
        this.pathname.replace(/^\//, '') && location.hostname ==
        this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +
                                          ']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: (target.offset().top - 54)
        }, 1000, "easeInOutExpo");
        return false;
      }
    }
  });

问题是它只触发 $('a') 并忽略其余的选择器。我尝试在浏览器上检查它:

控制台 - https://www.screencast.com/t/sikIcYY1J

使用调试器的源代码 -- https://www.screencast.com/t/TgbNhIb1usy

它似乎瞄准了正确的选择器，但未能触发如上所示的条件。除非我将 $('a') 作为唯一条件，否则我的平滑滚动将不再起作用。前几天还可以用，不知道怎么回事。一定是有什么东西触发了它不工作。有人可以启发我吗？非常感谢您的回答，非常感谢...

Answer 1

将target.length更改为$(target).length

添加e.preventDefault();

修复var target = this.hash;

但是，你为什么需要这个呢？ if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

您所需要的就是这个:

$(function() {
  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
      e.preventDefault();

      var target = this.hash;       

      if ($(target).length) {
        $('html, body').animate({
          scrollTop: ($(target).offset().top - 54)
        }, 1000, "easeInOutExpo");
        return;
      }
    });
});

<小时/>

无论如何，这是对您的脚本的修复。

$(function() {
  // Smooth scrolling using jQuery easing
  $('a.js-scroll-trigger[href*="#"]:not([href="#"])').click(function(e) {
    e.preventDefault();
    if (location.pathname.replace(/^\//, '') ==
      this.pathname.replace(/^\//, '') && location.hostname ==
      this.hostname) {
      var target = this.hash;
      target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');


      if ($(target).length) {
        $('html, body').animate({
          scrollTop: ($(target).offset().top - 54)
        }, 1000, "easeInOutExpo");
        console.log(target);
        return;
      }
    }
  });
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="navbarResponsive" class="collapse navbar-collapse col-auto">
  <ul id="primary-menu" class="navbar-nav text-uppercase">
    <li id="menu-item-1725" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1725 nav-item"><a href="#page-top" class="nav-link js-scroll-trigger">Home</a></li>
    <li id="menu-item-1739" class="nav-item menu-item menu-item-type-custom menu-item-object-custom menu-item-1739"><a rel="nav-link js-scroll-trigger" href="#services" class="nav-link js-scroll-trigger">Services</a></li>
    <li id="menu-item-1735" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1735 nav-item"><a href="#portfolio" class="nav-link js-scroll-trigger">Portfolio</a></li>
    <li id="menu-item-1736" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1736 nav-item"><a href="#about" class="nav-link js-scroll-trigger">About</a></li>
  </ul>
</div>
<p>ggwgsgwg</p>
<p> </p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ggwgsgwg</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p id="services">ggwgsgwg</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>ggwgsgwg</p>
<p>&nbsp;</p>
<p>ggwgsgwg</p>
<p>ggwgsgwg</p>
<p>&nbsp;</p>
<p>ggwgsgwg</p>
<p>ggwgsgwgv</p>