jQueryでaタグのリンクをクリックさせる方法

こんにちは! いわだて (@dutchisover) です！最近やっと「WEB業界希望！」から「WEB業界人」にジョブチェンジ出来ました！いろいろな人からお力添えを頂いて、僕は本当に幸せなポジションにいるな、と強く感じてます。これから恩返しをバンバンしてきますので！よろしくお願いします。

jQueryでは特定の動作をした時に指定した要素をクリックしたことにするイベントがありますが、今回はaタグのリンクをクリックさせて、ページ変移をさせたかったのですが、aタグにクリックイベントを付けただけではページ移動が起こらず、少しハマったのでやり方を共有します。

content

jQueryを使ってクリックイベントを発火させるには、以下の方法があります。

jQuery("#hoge").trigger("click");

//もしくは

jQuery("#hoge").click();

jQuery("#hoge").trigger("click");

//もしくは

jQuery("#hoge").click();

ただ、これはあくまでクリック時のイベントを発動させるだけで、実際にクリックするわけでは無いようです。

今回困ったのが、特定の動作に対してaタグのリンクをクリック＝ページを変移させる をやりたかったのですが、上記したclick() や trigger(“click”) ではリンクをクリックしたことにはならず、ページ変移が起きませんでした。

解決策として、今回はこれで対応しました。

内容は

//aタグのクリック時に自分のhref属性のURLへ変移させるクリックイベントを書く。
jQuery("#hoge a").click(function(){
	var href = jQuery(this).attr("href");
	location.href = href;
});

//aタグのクリック時に自分のhref属性のURLへ変移させるクリックイベントを書く。

jQuery("#hoge a").click(function(){

var href = jQuery(this).attr("href");

location.href = href;

});

を、敢えて追加することで動くようになりました。

あとは

//発火させたいイベント内に先ほどのaタグをクリックさせるコードを書く。
jQuery("#hoge").hover(function(){
	jQuery("#hoge a").trigger("click");
});

//発火させたいイベント内に先ほどのaタグをクリックさせるコードを書く。

jQuery("#hoge").hover(function(){

jQuery("#hoge a").trigger("click");

});

で無事思い通りの動作ができました。

今回はこちらの記事 javascriptのclickイベントでリンク | WEBdev を参考にさせていただきまして助かりました。アザス!

これは使い方を間違えるとユーザーの予期せぬタイミングで行きたくもなかったページに移動させられてしまいます。

僕個人の感想では、ブロクのスマホ用デザインで左右のスワイプをすると前の記事や次の記事に飛ばされるブログに出会うたびに小さな殺意が芽生えたりします。ので、使いドコロには気をつけて下さい。

以上、 @dutchisover でした!

jQuery の他の記事