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

Question

我刚刚遇到这个问题

FIDDLE

在锚点标记上触发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

您需要调用本机DOM click()方法才能激发默认的点击锚点行为，jQuery特别将其排除在锚点上：

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

-jsFiddle-

Answer 2

使用

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

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

更新的fiddle

Answer 3

由于没有绑定任何.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);