[jQuery] aタグのリンクをクリックさせる方法 2019版
経緯
jQueryでは特定の動作をした時に
指定した要素をクリックしたことにするイベント
があります。
ですがaタグのリンクをjQueryのイベントクリックさせたことにしてページ変移をさせたかったのですが、普通にやってもうまくいきませんでした。。
そのままaタグにクリックイベントを付けただけではページ移動が起こらず、解決するまで少しハマったのでやり方を共有します。
クリックしたことにするイベント
jQueryを使ってクリックイベントを発火させるには、以下の方法があります。
|
1 2 3 4 5 |
$("#hoge").trigger("click"); //もしくは $("#hoge").click(); |
ただ、これはあくまでクリック時のイベントを発動させるだけで、実際にクリックするわけでは無いようです。
今回困ったのが、特定の動作に対して
aタグのリンクをクリック＝ページを変移させる
をJSだけでやりたかったのですが、上記した click() や trigger(“click”) の書き方ではリンクをクリックしたことにはならず、ページ変移が起きませんでした。
そして、試行錯誤してできた方法がこれになります！
ページ変移させるやり方
|
1 2 |
//いったんaタグの href属性(URL) を取得 const href = $(a#next-page).attr("href"); |
で目的のURLを持っているaタグのhref属性からURLを取り出します。
そしてJSで発火する条件を決めて、その条件に合致したときに下記の書き方をします。
|
1 2 |
//取得した href属性(URL) を location を使ってページ遷移する location.href = href; |
これで無事思い通りの動作ができました。
使いどころとしてはこんな感じでしょうか。
- スマホで左右のスワイプ時に前の記事、次の記事へ遷移させる機能を付ける
- クイズ系のコンテンツで、チェックボックスで特定の組合せにチェックが入ったら正解ページへ遷移させる
- HTMLの修正ができない環境で、JSだけでなんとかページ遷移をゴニョゴニョしないといけない
追記：この方法がベストです
2019.4.20追記
上記の方法だとGoogle Analyticsで不具合が出ることがいくつかありました。
なのでこちらの方法がベストかと思います。
|
1 2 |
//href属性(URL)を使いたいaタグを指定して、うしろに[0]を付ける $(a#next-page)[0].click(); |
【参考サイト】 jQueryでリンクをクリックさせたい時 – Qiita
このコードを動作させたいイベントなどに組み込んでもらうと動くと思います。
サンプル
リンクを設定していないテキストにイベントを仕込んで、イベント発火したら別のaタグのhrefリンクに飛ばしてみます。
|
1 2 3 4 5 |
$(function () { $("#dummy-event").on("dblclick", function(){ $("a#next-page")[0].click(); }); }); |
下のテキストをダブルクリックするとこのaタグのリンクに飛びます
「ダブルクリック！！」
取扱注意！
これは使い方を間違えるとユーザーの予期せぬタイミングで行きたくもなかったページに移動させられてしまいます。
使いドコロには気をつけて下さい。
以上、 @dutchisover でした!
