clickイベントに紐づけている関数をon()かclick()のどちらかに統一して記述しようとしたときに、ふと気になったのでハックに残しておきます。
<input type="button" id="hoge" value="button"> <script> $(function(){ // 新しい要素の追加 $('#generate').click(function(){ $('#hoge').after('<input type="button" id="hogehoge" value="click">'); }); // clickされた時の処理① $('#hogehoge').click(function(){ alert('click!!'); }); // clickされた時の処理② $(document).on('click', '#hogehoge', function(){ alert('on!!'); }); }); </script>
以上のコードにおいて、いっけん処理①も②も同じ処理のように見えます。しかし、実際有効な処理は処理②のほうだけみたいです。
ここで、以下のon()とclick()の違いが重要になってきます。
click() : ページロード時に存在する要素にイベントを付与して、その後動的に追加されたものには有効でない。
on() : ページロード時後、動的に追加された要素にもイベント付与してくれる。
以上の違いを理解していると、多少コードが長くなったとしてもon()を使ったほうがエラーの危険性は少なくなりそうです。