为何click()函数无法触发anchor标签点击？按钮跳转失效问题

我来帮你拆解下这个问题哈～你现在的需求是隐藏a标签，通过按钮触发它的跳转，但直接用$("a").click()没效果，反而手动点a标签能正常跳转，这其实是浏览器安全机制和事件触发逻辑的问题。

问题根源 #

你用jQuery的$("a").click()触发的是绑定在a标签上的自定义事件处理器，但浏览器的a标签默认跳转行为，是需要真实的用户交互动作（比如鼠标点击、键盘回车）来触发的。浏览器为了防止恶意脚本自动跳转页面，会限制非用户触发的程序化点击来执行默认行为——jQuery的触发方式并没有模拟出浏览器认可的“真实用户点击”，所以默认的跳转就没生效。

另外，你的a标签是空的（没有任何内容），虽然它在DOM结构里，但没有被渲染成可见元素，这也可能让浏览器进一步限制这种程序化的跳转触发。

解决方案 #

给你几个靠谱的解决办法，按需选就行：

方案1：直接通过window.location跳转 #

这是最简单直接的方式，直接获取a标签的href属性，赋值给window.location.href：

$(document).ready(function(){
  $("button").click(function(){
    window.location.href = $("a").attr("href");
  });
});

方案2：支持target属性的跳转 #

如果你的a标签有target="_blank"这类属性，想要保留新窗口打开的特性，可以用window.open：

$(document).ready(function(){
  $("button").click(function(){
    const $link = $("a");
    const url = $link.attr("href");
    const target = $link.attr("target") || "_self";
    window.open(url, target);
  });
});

方案3：调用原生DOM元素的click()方法 #

jQuery对象转成原生DOM元素后，调用它的click()方法，这个方法会模拟真实用户点击，能触发默认跳转：

$(document).ready(function(){
  $("button").click(function(){
    $("a")[0].click(); // [0]获取第一个匹配的原生DOM元素
  });
});

总结 #

核心区别就是：jQuery的click()是触发事件回调，而原生DOM的click()是模拟真实用户交互，后者能绕过浏览器的安全限制触发默认跳转；当然直接操作window.location也是更直接的方式，不需要依赖a标签的事件机制。

内容的提问来源于stack exchange，提问作者Hairi