リンクを描画するための極めてシンプルな方法として<a>タグのhrefがあります。
<a href="http://azuma006.hatenablog.com/">あずまや</a>
<a></a>タグで囲まれた文字列をクリックすると、href属性に書かれたURLへ遷移します。
今回はAjaxでなんらかの処理をしたあと、画面内のリンク先へ遷移させるため、jQueryのtriggerという関数を使って、JavaScriptの処理としてマウスクリックを実現して遷移させようとしました。
<!--
$(function() { $('#submitBtn').click(function() { // なんらかのAjax処理 start
～～～ 省略 ～～～
// なんらかのAjax処理 end
$('#back').trigger('click');
}); }); //-->
<input type="button" value="ボタン" id="submitBtn" /> <a href="/hoge/fuga" id="back">戻る</a>
なんとなく雰囲気が伝わればよいですが、ボタンを押すとAjax通信してサーバ処理を行い、終わったら戻るリンクをクリックするような動きをJavaScriptで実装しています。
ところが、この記述だと<a>タグのonclickは実行されるのですが、画面遷移は行われませんでした。
その辺りは以下の記事にも書かれていました。
LogicA jQueryでaタグのリンクをクリックさせる方法 − » jQueryでaタグのリンクをクリックさせる方法
今回は、上記の記事の解決方法とは別の方法を見つけたので紹介してみます。
不思議なことに、以下のようにするだけです。
<!--
$(function() { $('#submitBtn').click(function() { // なんらかのAjax処理 start
～～～ 省略 ～～～
// なんらかのAjax処理 end
$('#back').trigger('click');
}); }); //-->
<input type="button" value="ボタン" id="submitBtn" /> <a href="/hoge/fuga"><span id="back">戻る</span></a>
<a>タグの内側の要素に対してtriggerを実行すると、その要素の親たちもクリック処理が順次行われていきます。
その過程で、何故か<a>タグのhrefによる画面遷移も行われました。
この方法の良いところはJavaScript側に修正を加える必要が無い点です。
なお、以下のような解決方法もあるようです。
<a href="/hoge/fuga" id="targetLink">It's a pit world</a>
<script>
$(function(){
// 何らかの処理
$('#targetLink')[0].click(); // ←コレがポイント
// $('#targetLink').trigger('click');では動かない。
});
</script>
<a>タグの子要素をクリックさせる、という点で考え方は同じな感じでしょうか。
ちなみに、適当に書いたhref属性の中身が完全に一致していてちょっとびっくりしました。
