jQueryを使い、iframeのsrcを動的に書き換えようとしてハマった話

まずは、以下のHTMLを見てください。

jQueryを使い、「A」が押されたら動的にiframeのsrcが変わるようしていきたいと思うのですが・・・

ここで、はまりました。

次に、はまったjsコードを見てください。

ここでしていることは、

例えば、

1. 「B」がクリックされたら（3行目）
2. 「B」のdata-idを取得し（4,5行目）
3. そのdata-idを元に
4. hogeディレクトリの中にあるhoge2-1(data-id).htmlをiframeに入れる（6行目）

ということをしています。

しかし、このままでは、
aタグのhref属性が効いてしまい、
せっかくiframeのsrc属性を変更しても、
また元に戻ってしまいます。（上記jsコード6行目）

そこで、以下のように変更！

aタグのクリックイベントをpreventDefault();でキャンセルしました。
それ以降の処理が完了しても、aタグのhref属性は効かないので、うまくいきます！

他にpreventDefault();をreturn false;にするやり方がありますが、

return false;以降の処理が走らないので、気をつけましょう！と自分の言い聞かせる・・・
これに関しては、以下の記事が参考になります。

ここに至るまで1日かかりました・・・。