後から挿入したHTMLタグのクリックイベントが反応しない。

始めから表示しているHTMLタグのクリックイベントは反応するが、jQueryで挿入したHTMLタグのクリックイベントは反応しないことがあった。

恐らく、PHPやHTMLファイルであらかじめ表示されているタグは存在しているもので、Javascriptなどで動的に編集したものは表面上のものを編集しているだけなので、後からのものは元々ないと判断されるものだと思う。

解決方法として、clickイベントを使うのではなく、onイベントのClickを利用し、対象となるタグの親を指定する。

前準備として以下な感じ

<ul>
</ul>
<script>
	$(function(){
		$("ul").html("<li>1</li><li>2</li><li>3</li><li>4</li>");
	})
</script>

反応しない例
$("ul li").click(function(){
	alert("click");
});
// 結果　→　反応なし

反応した例
$("ul").on("click", "li", function(){
	alert("click");
});
// 結果　→　反応あり