質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.12%

クリック強制イベントが動かない

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 9,469

omusoba

score 25

【例】

<a href="#ar_email_popup" class="login_popup_boxer" id="alert"></a>
<div id="ar_email_popup" style="display: none;">
    <div class="ua_popup_content" style="width:220px !important;  margin-bottom:20p;">
        <div>
            <center>
                <div class="ua_login_popup_text">メールアドレスを登録してください</div>
            </center>
        </div>
        <div>
            <center>
                <a>
                    <button class="button button--large" id="email_update" type="submit" onClick="emailupdate()">登録</button>
                </a>
            </center>
        </div>
    </div>
</div>
jQuery(document).ready(function($){

    $('#alert').click();

}

例えばこの様にあるページを読み込みんだ時に強制的にクリックイベントを起こしてポップアップを出し、そこからボタンを押してメールアドレス登録フォームへ向かさせる処理を作成しています。
ですが現在作成している状態では動かない状態になってます。

実際にこのid="alert"のテキスト部分を書き込み、画面に表示させてそれを押すとポップアップが出てその後の処理も問題なくできました。
後は強制的にポップアップを出す為のクリック強制イベントがうまく起動できていないことがわかっています。

クリックの強制発火イベントが動かないケースがありましたら教えていただければと思っております。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

$('#alert').trigger("click");を試してください。

水平線以下は私の誤解で誤った内容です。
コメント欄でのkei344さんのご指摘の通りとなります、ありがとうございます。
削除してしまうとコメント欄との整合性がなくなるため残しますがご注意下さい。


$('#alert').click();clickイベントを発生させるのではなくclickイベントが発生した時に

$('#alert').click(function(){
//ここにclickされた時に行いたい処理を入れる
});


と使う感じになります。
--誤った内容ここまで--


既に解決済みですが.trigger("click");にしただけで直ったのが釈然としなかったので他の原因を探ってみました。

//jQuery 2.2.3
<script>
$(function(){
  $('#teratail').click(); //click1
  $('#teratail').trigger('click'); //trigger1
  $('#teratail').click(function(){
    console.log('teratail');
    return false;
  });
  $('#teratail').click(); //click2
  $('#teratail').trigger('click'); //trigger2
});
</script>
<body>
<a href="https://teratail.com" id="teratail">terateil</a>
</body>


実際の確認時はclick1,click2,trigger1,trigger2をコメントアウトで変更してそれぞれconsole.logに出力されるか確認。

結果は

click1→出力なし
click2→出力あり
trigger1→出力なし
trigger2→出力あり


でしたので、.click() .trigger('click')共にイベントハンドラ定義後にeventを発生させる必要がある(当然の結果ですが・・・)ので冒頭の回答を受けて修正された際にイベントハンドラ定義後の行に書きなおされたのが直った原因ではないかと推測しています。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/26 19:06

    To: hide2e3rさん
    .click()は.trigger('click')への ショートカットです。

    【.click() | jQuery 1.9 日本語リファレンス | js STUDIO】
    http://js.studio-kingdom.com/jquery/events/click
    > 引数なしの3つ目は.trigger('click')への ショートカットです。

    【.click() | jQuery API Documentation】
    https://api.jquery.com/click/

    キャンセル

  • 2016/05/26 20:35

    そもそも根本的な勘違いでしたね!
    ありがとうございます、解決できました!

    キャンセル

  • 2016/05/26 20:52

    To:kei344さん
    ご指摘ありがとうございます、完全に思い込みで回答しておりました。
    回答の方に誤った内容である旨追記させていただきました。

    Re:omusobaさん
    コメントの時間的にkei344さんのコメントをご覧になっているかと思いますが、もし見逃していたようならぜひご確認ください。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.12%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる