触发点击 link 不会更改位置哈希

Question

我正在开发一个 Web 应用程序，该应用程序在某些情况下使用 onHashChange 事件侦听器，手动单击带有 href="#hash" 的 link 效果非常好。但是，当我使用地址栏中的 jQuery 的 $('a[href=#"hash"]').trigger('click') 或 $('a[href=#"hash"]').click() 哈希值触发点击相同的 link 时，它并没有改变。

是我做错了什么吗？或者我应该为此使用其他方法？

HTML

<a href="#hash">Do Something</a>

JS

// Not working
$('a[href="#hash"]').click();

// Not working
$('a[href="#hash"]').trigger('click');

Answer 1

click 方法（当被 jquery 使用时）触发您使用 el.click(function.. 和 el.on('click', function...[=23= 注册的 click 事件]

您可以创建一个新的 MouseEvent 并将其直接发送到相关元素：

e = document.createEvent('MouseEvents');
e.initEvent("click", true, true);
$('a[href="#hash"]')[0].dispatchEvent(e)

The above code will work in Chrome, Firefox and IE

或者直接使用元素的click事件（不会使用jquery的click功能，而是浏览器的click功能）：

$('a[href="#hash"]')[0].click()

Note that this code might not work in several browsers due to security reasons.

Answer 2

希望这里的新人不要大张旗鼓。我只是想也许我在我的网站上使用的这段代码中的某些内容可能会对您有所帮助。好像和你描述的差不多。

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

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
      'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
      window.location.hash = target;
    });
  });
   });

Answer 3

你写的是真的（足以调试jQuery源代码）：触发点击事件在锚点上不起作用。

为了实现您正在尝试的效果，您可以获取 dom 元素，然后触发点击：

$('a[href="#hash"]').get(0).click()

只有这行得通。

触发点击 link 不会更改位置哈希

Triggering click on a link doesn't change location hash

javascript

jquery

fragment-identifier