続々 jQueryメモ:clone(true)?
先日のエントリー「jQueryメモ:変数に入れた要素が・・・」と、「続 jQueryメモ:変数に入っているのは?」で、clone()の使い方などを勉強したのですが、そのcloneでtrueを入れると、要素についているイベントごと複製できるとコメントにて教えていただきました。
早速試してみます。
clone()でtrueなしの場合
trueがない場合と、ある場合を比較してみましょう。
■サンプルHTML
<p id="test1"><button class="btn1">デモ1</button></p> <p><button class="btn2">デモ1を複製</button></p> <p id="test2">ここに複製されます</p>
■複製部分につけるスクリプト
$('.btn1,.btn3').click(function(){ alert($(this).text() + 'をクリックしました。') });
■サンプルスクリプト
var arrange = $('#test0 li'); $('button#btn1').one('click',function(){ alert(arrange); });
■サンプルデモ(clone()のみ)
ここに複製されます
複製される前のボタンをクリックすると、アラートするのですが、trueのつけていないcloneで複製をした場合は元のところについているJavaScriptのイベントはついてないです。複製されたボタンをクリックしても動作しないのでわかると思います。
clone()でtrueありの場合
今度は先程と同じHTMLとスクリプトの要素を、trueをつけたcloneで複製してみます。
■サンプルデモ(clone(true))
ここに複製されます
tureなしと違って、trueがあると、イベントごと複製されるためデモ2は複製された部分でも、クリックをするとアラートします。
trueありとなしでこのような違いがあるのですね。
今回も勉強になりました。要素を複製するときにイベントが付いていて、それもつけておきたい場合は、tureをつけておくべきなのですね。
まだまだ勉強中の身なので、知らないことがたくさんあります。もし他にもいろいろ気づいた点やご意見などがございましたら、コメントなりメールなり、書いてくださると嬉しいです。何かありましたらよろしくお願いいたします。