jQueryで後から追加した要素の操作を行う

ボタンを押すと要素が増える。
特に入力要素等が多く、決め打ちで入力欄を持たずにボタンを押すとどんどんと要素が追加されるって言うフォームが増えている。
ただ、その入力要素に対してのチェック等は既存の書き方だと、jsは読み込んだ際に有る要素に関してのイベントのバインドは出来るが、新たに生まれた要素に関してはバインド出来ていない。

	#仮にidがhoge、classがfugaと言う要素が新たに生まれた要素とする場合
	<p id="hoge" data-role="ほげだよ">ほげほげです</p>
	<div class="fuga" data-role="ふがだよ">ふがふがだよ</p>
	#こんな感じのhtmlがjsによって生成されたとする

	#要素名には #hoge .fuga どちらかを明示させる
	$(document).on("click", "要素名", function (){
		alert($(this).data("role"));
	});

ここから導き出される挙動として、クリックされた要素に設定されているdata-roleの値をダイアログとして表示させると言う事になる。
動的なフォームを作っていても忘れるのでメモ。