JS/jQueryを使って、動的に生成したURLへ遷移させる

3種類考えたので全部書いとく。
「動的に生成したURL」ってタイトルだけどその生成部分は重要じゃないので普通に固定値で書いてる。

location.hrefを使う方法

＜HTML＞

<a href="#" onclick="redirect();">ダミーリンク</a>

＜jQuery＞

function redirect(){
    location.href = "http://example.com";
}

簡単。
でもこれを使いたくないパターンがあったので別解を作った。

aタグを書き換える方法

＜HTML＞

<a href="#" onclick="redirect();" id="linktag">ダミーリンク</a>

＜jQuery＞

function redirect(){
    $("#linktag").attr("href", "http://example.com");
}

この方法ならほかの属性も変更できる。
target="_blank"したりとか。

ただ、aタグの書き換えは行われるけどその後クリックした扱いにならないことがあったので、
その場合は例えば以下のようなのを追加しました。

$("#linktag").attr("onclick", "");
$("#linktag")[0].click();

「.click()」で強制的にクリックさせるけど、
その時にonclickが再発動しないように空にしておく…という感じ。

location.hrefも既存タグ変更もやりたくないケースもあるかもしれないので
さらに別解を作った。

新しいaタグをこっそり作ってそっちを押したことにする方法

＜HTML＞

<a href="#" onclick="redirect();">ダミーリンク</a>

＜jQuery＞

function redirect(){
    var virtuallink = $("<a></a>", {href: "http://example.com", id: "virtuallink"});
    virtuallink.text(" ");
    $("body")[0].appendChild(virtuallink[0]);
    $("#virtuallink")[0].click();
}

要するに

<a href="http://example.com" id="virtuallink">

というタグをbodyの一番最後にくっつけて、それにクリックイベントを起こす方法です。

あんまりかっこよくないので、
生成したオブジェクトそのものに対してclickできないかと試したけど動作せず。
（jQueryの最後の行を「 virtuallink[0].click(); 」としても動くのに、
　その前の「 $("body")[0].appendChild(virtuallink[0]); 」を削除すると動かない）

参考文献

https://qiita.com/t_furu/items/31c5bc3a1573ef4049e2
https://qiita.com/kazu56/items/8e92d08fd1bba0a2d771