jquery - 在锚标签上触发点击事件不起作用

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

您需要调用本机 DOMclick()方法才能触发默认单击锚点行为，jQuery 专门将其排除在锚点上：

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

-jsFiddle-

Answer 2

利用

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

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

更新的小提琴

Answer 3

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

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

而是试试这个：

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

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

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