今日はjQueryで動的に作られた要素に対してイベントを指定する方法をみていきたいと思います。
onメソッドを使えばjQueryで動的に作られた要素に対してイベントを指定することが出来るのですが、そもそもなんでonメソッドを使う必要があるのかという部分からまとめていきたいと思います。
onメソッドを使う理由
例で以下のソースを用意しました。
<p>onメソッドを使う理由</p>
<button>動的に要素を追加</button>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
var p = $("<p>").text("追加されたp要素").addClass('add');
$(this).after(p);
});
});
</script>
ボタンをクリックするとボタンの下に「追加されたp要素」というテキストが現れます。
これがjQueryによって動的に作られた要素です。
次に動的に作られた要素に対してイベントを設定していきます。
私がonメソッドを知らなかったときは（つい最近）、このように指定していました。
<div class="wrap">
<p>onメソッドを使う理由</p>
<button>動的に要素を追加</button>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
var p = $("<p>").text("追加されたp要素").addClass('add');
$(this).after(p);
});
$(".add").click(function(){
$(this).fadeOut();
});
});
</script>
やりたいことはaddクラスがついている要素をクリックすると非表示にするということです。
実際にやってみていただくとわかると思うんですが、これだと動きません。
ドキュメントが読み込まれた時点でaddクラスがついた要素は存在していません。
存在していない要素に対してイベントを指定しても、「そんなのないよ」ってなって何もおこりません。
じゃあどうするか。
ここで登場するのがonメソッドです。
onメソッドはドキュメントが読み込まれた時点で存在していなかった要素にイベントをつけることができます。
天才ですね。
onメソッドの使い方
onメソッドの構文です。
$(“イベントの対象になる要素の親要素”).on(“イベント”,”イベントの対象になる要素”,function(){
//処理
})
実際に先程のソースを書き換えてみましょう。
<div class="wrap">
<p>onメソッドを使う理由</p>
<button>動的に要素を追加</button>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
var p = $("<p>").text("追加されたp要素").addClass('add');
$(this).after(p);
});
$(".wrap").on("click",".add",function(){
$(this).fadeOut();
});
});
</script>
こうすることで動的に追加されたaddクラスのp要素をクリックすると非表示になります。
よくつかわれるということなので動的に要素を追加したときにはすぐにonメソッドのことを思い出せるようにしておきましょう。
今日はここまでです。
せば！
