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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

19919閲覧

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

omusoba

総合スコア29

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2016/05/26 09:13

【例】

HTML

1<a href="#ar_email_popup" class="login_popup_boxer" id="alert"></a> 2<div id="ar_email_popup" style="display: none;"> 3 <div class="ua_popup_content" style="width:220px !important; margin-bottom:20p;"> 4 <div> 5 <center> 6 <div class="ua_login_popup_text">メールアドレスを登録してください</div> 7 </center> 8 </div> 9 <div> 10 <center> 11 <a> 12 <button class="button button--large" id="email_update" type="submit" onClick="emailupdate()">登録</button> 13 </a> 14 </center> 15 </div> 16 </div> 17</div>

Javascript

1jQuery(document).ready(function($){ 2 3 $('#alert').click(); 4 5}

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

水平線以下は私の誤解で誤った内容です。

コメント欄でのkei344さんのご指摘の通りとなります、ありがとうございます。
削除してしまうとコメント欄との整合性がなくなるため残しますがご注意下さい。


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

javascrpt

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

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


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

javascript

1//jQuery 2.2.3 2<script> 3$(function(){ 4 $('#teratail').click(); //click1 5 $('#teratail').trigger('click'); //trigger1 6 $('#teratail').click(function(){ 7 console.log('teratail'); 8 return false; 9 }); 10 $('#teratail').click(); //click2 11 $('#teratail').trigger('click'); //trigger2 12}); 13</script> 14

html

1<body> 2<a href="https://teratail.com" id="teratail">terateil</a> 3</body>

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

結果は

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

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

投稿2016/05/26 09:33

編集2016/05/26 13:04
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

omusoba

2016/05/26 11:35

そもそも根本的な勘違いでしたね! ありがとうございます、解決できました!
退会済みユーザー

退会済みユーザー

2016/05/26 11:52

To:kei344さん ご指摘ありがとうございます、完全に思い込みで回答しておりました。 回答の方に誤った内容である旨追記させていただきました。 Re:omusobaさん コメントの時間的にkei344さんのコメントをご覧になっているかと思いますが、もし見逃していたようならぜひご確認ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問