genkoに脚注機能をつけよう

HTMLで雑誌の原稿を書くためのツールで原稿を書いている。脚注を本文中に書きたいけど、見るときには本文中には(*)とか出して、脚注の本体は本文とは別のところに出したい。

<a class="footnote">(脚注: ほげほげ)<;/a>

と書くと本文としては(*)になってくれて、僕のCSS力では脚注・傍注として表示するのは難しいので、とりあえずクリックしたらalertで出すようにしようと思った。

これがそのコード

    // 脚注span.footnoteを(*)で表現
    $(".footnote").each(function(){
	var text = this.innerHTML;
	this.innerHTML = "(*)"
	this.href = "#";
	$(this).click(function(){
	    alert(text);
	});
    });

だけどクリックしてもalertがでないんだよな。何がいけないんだろう？

---

ああ、わかった、hrを本文の裏に入れたくて#containerでz-index: -2、hrでz-index: -1とかやっていたのがいけないようだ。これは親エレメントの値からの相対値で、これだとhrが-3になってしまう。あと負の値にはあまりしないようだ。多分これが原因でclickイベントをbodyとかが受け取ってしまってたんだろう。コンテナでz-index: 2をしてhrでz-index: -1したら期待通りの挙動になった。