在锚标记上触发点击事件不起作用

Question

我刚刚运行进入

在锚标记上触发 click 事件在这里不起作用。

<a class="button2" href="#popup1">hello</a>
<div id="popup1" class="overlay">
  <div class="popup">
    <div class="contentSpec">
      <h2>Would you like to visit</h2>
      <h1>someURL</h1>
    </div>
    <a class="close" href="#"></a>
    <div class="content">

      <div class="box">
        <a class="button" href="#popup1">YES</a>
        <a class="button1" href="#popup1">NO</a>
      </div>
    </div>
  </div>
</div>

JS:

$(document).ready(function() {
  $(".button2").trigger('click');
});

我的问题是，为什么触发事件在这种情况下不起作用？

Answer 1

~~因为您没有绑定任何 .click() 事件，它永远不会触发它。~~

您需要使用 .click() 而非 jQuery 方法的 .trigger(e) 触发 DOM click 事件，这应该只适用于 dom 节点。您可以通过引入索引 [0] 或使用 jQuery 的方法 .get(0) 来实现。

试试这个：

$(document).ready(function() {
  $(".button2")[0].click();
  // or $(".button2").get(0).click();
});

如果是这种情况，那么您只能使用 javascript 执行此操作：

window.addEventListener('DOMContentLoaded', function(e){
   document.querySelector('.button2').click();
}, false);

Answer 2

使用

$(".button2").get(0).click();

get(0) 将 return 第一个 DOM 对象而不是 jquery 对象，并且 click() 将被触发。

Updated fiddle

Answer 3

您需要调用本机 DOM click() 方法才能触发默认的点击锚点行为，jQuery 具体 excludes it on anchor:

$(document).ready(function() {
  $(".button2")[0].click();
});

在锚标记上触发点击事件不起作用

Triggering click event on anchor tag doesn't work

jquery

jquery-trigger

-jsFiddle-