使用jQuery trigger触发a标签点击无法打开链接的问题

原因 #

jQuery的trigger("click")仅会触发通过JavaScript绑定的click事件处理函数，不会触发浏览器对<a>标签的原生导航行为。原生的<a>标签跳转是浏览器内置的默认动作，不属于绑定的事件回调范畴，所以用jQuery的trigger无法触发这个跳转。

解决方案 #

提供三种常用方案，按需选择：

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

直接获取<a>对应的原生DOM节点，调用其click()方法，这个方法会完整模拟用户点击的所有行为（包括触发绑定事件+浏览器导航）：

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
  <a id="go" href="go">go</a>

  <script>
    // 调用原生DOM的click方法
    $("#go")[0].click();
  </script>
</body>
</html>

方案2：直接通过location.href跳转 #

如果不需要触发<a>标签上绑定的其他click事件，直接读取href属性并设置页面跳转更高效：

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
  <a id="go" href="go">go</a>

  <script>
    // 直接设置页面跳转
    window.location.href = $("#go").attr("href");
  </script>
</body>
</html>

方案3：先触发绑定事件再手动跳转 #

如果需要先执行<a>标签上绑定的自定义click事件，再完成跳转，可以分开操作：

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
</head>
<body>
  <a id="go" href="go">go</a>

  <script>
    // 先触发绑定的事件
    $("#go").trigger("click");
    // 再手动跳转
    window.location.href = $("#go").attr("href");
  </script>
</body>
</html>

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