続々 jQueryメモ：clone(true)？

2009/05/10

イベントも複製

先日のエントリー「jQueryメモ：変数に入れた要素が・・・」と、「続 jQueryメモ：変数に入っているのは？」で、clone()の使い方などを勉強したのですが、そのcloneでtrueを入れると、要素についているイベントごと複製できるとコメントにて教えていただきました。
早速試してみます。

trueがない場合と、ある場合を比較してみましょう。

<p id="test1"><button class="btn1">デモ１</button></p>
<p><button class="btn2">デモ１を複製</button></p>
<p id="test2">ここに複製されます</p>

$('.btn1,.btn3').click(function(){
	alert($(this).text() + 'をクリックしました。')
});

var arrange = $('#test0 li');
$('button#btn1').one('click',function(){
	alert(arrange);
});

ここに複製されます

複製される前のボタンをクリックすると、アラートするのですが、trueのつけていないcloneで複製をした場合は元のところについているJavaScriptのイベントはついてないです。複製されたボタンをクリックしても動作しないのでわかると思います。

今度は先程と同じHTMLとスクリプトの要素を、trueをつけたcloneで複製してみます。

ここに複製されます

tureなしと違って、trueがあると、イベントごと複製されるためデモ２は複製された部分でも、クリックをするとアラートします。

trueありとなしでこのような違いがあるのですね。

今回も勉強になりました。要素を複製するときにイベントが付いていて、それもつけておきたい場合は、tureをつけておくべきなのですね。

まだまだ勉強中の身なので、知らないことがたくさんあります。もし他にもいろいろ気づいた点やご意見などがございましたら、コメントなりメールなり、書いてくださると嬉しいです。何かありましたらよろしくお願いいたします。