javascript - 另一个脚本完成后的 jQuery 触发函数

Question

我有一个打字动画插件，需要几秒钟才能运行。最开始会显示一个按钮。我还有一个功能可以平滑滚动到 anchor 链接并从 URL 中剥离 anchor 。我在文档准备好时加载它们的打字脚本，并在窗口加载时加载滚动功能。我遇到的问题是，单击打字插件中的 anchor 链接时，滚动功能不会被触发。我还尝试在输入插件之后立即调用滚动函数。我的代码目前如下所示。

function anchorLinks() {
    $('a[href*=#]:not([href=#])').click(function() {
      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 -1
          }, 500);
          return false;
        }
      }
    });
}; 


$(window).load(function(){
  anchorLinks();
});

然后...

$(document).ready(function(){
  $('#msg').typeIt({
      speed: 50,
      breakLines: false,
      autoStart: false,
      cursor: false,
      startDelay: 2000
  })
  .tiType('Hi!')
  .tiPause(1500)
  .tiDelete()
  .tiType('I\'m Sandra Willford, and welcome to TENDesign.')
  .tiPause(1500)
  .tiDelete()
  .tiType('Looking for a designer that has bright ideas for your brand?')
  .tiPause(1500)
  .tiDelete()
  .tiType('Well congratulations, you\'ve landed in the right spot :)')
  .tiPause(1500)
  .tiDelete()
  .tiType('I specialize in fresh and innovative digital, website & branding designs.')
  .tiPause(1500)
  .tiDelete()
  .tiType('Are you ready to take your brand to the next level?')
  .tiPause(1500)
  .tiDelete()
  .tiType('<a href="#start">OMG, Yes I am!...Show me more.</a>');
  anchorLinks();
});

建议我们将不胜感激!

Answer 1

我认为你需要这样的东西。未测试:

$(document).on('click', 'a[href*=#]:not([href=#])', function (e) {
    e.preventDefault(); //<!-- use this instead return false. 
    //Return false is triggering preventDefault and stopPropagation also.
    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 - 1
            }, 500);
        }
    }
});

• 您无需从代码中调用该函数，因为我已将其删除。

• 使用 $(document).on() 作为动态加载的元素。

• 请勿在函数内使用 document.ready。

• 如果确实没有必要，请勿在函数内部附加事件处理程序。相反，在需要的地方使用 off()。