web-dev-qa-db-ja.com

アンカータグでのクリックイベントのトリガーが機能しない

私はちょうどこの質問に遭遇しました

[〜＃〜]フィドル[〜＃〜]

アンカータグでの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');
});

私の質問は、なぜこの場合トリガーイベントが機能しないのですか？

jqueryjquery-trigger
10
jGupta

デフォルトのクリックアンカー動作、具体的にはjQueryを起動するには、ネイティブDOM click()メソッドを呼び出す必要があります アンカーでそれを除外します ：

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

-jsFiddle-

26
A. Wolff

使用する

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

get(0)はjqueryオブジェクトの代わりに最初のDOMオブジェクトを返し、click()がトリガーされます。

更新されたフィドル

5
Adam Azad

.click()イベントがバインドされていないため、イベントが発生することはありません。

JQueryメソッドの.click()ではなく.trigger(e)を使用してDOMclickイベントを発生させる必要があります。これは、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);
_
1
Jai