THE HAM MEDIA BLOG

続々 jQueryメモ:clone(true)?

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery
タグ:
jquery
CLONE

イベントも複製

先日のエントリー「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をつけておくべきなのですね。

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

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は90日以上新しい記事の投稿がないブログに表示されております。