jQuery API の clone( [withDataAndEvents] ) は、マッチした要素をコピーするメソッド。withDataAndEventsに、trueを設定すると、イベントハンドラや要素データも、要素と一緒にコピーする。
引数
- withDataAndEvents
booleanType（論理型）。
trueであれば、イベントハンドラや要素データも、要素と一緒にコピーする。
falseであれば、イベントハンドラや要素データは、コピーしない。
記述方法
jQuery( セレクター ) . clone( true );
「セレクター」にマッチした要素をコピーする。イベントハンドラや要素データも、要素と一緒にコピーする。
記述例
jQuery( '#jquery-sample li' ) . clone( true ) . appendTo( '#jquery-sample' );
idがjquery-sampleである要素内のli要素を、コピーし、idがjquery-sampleである要素の最後に追加する。イベントハンドラや要素データも、要素と一緒にコピーする。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
実装例（サンプル）の動作について
「項目１」をクリックすると、項目１をコピーし、リストの最後に追加する。
項目２、項目３も同様で、クリックすると、コピーし、リストの最後に追加する。
コピーした項目も、クリックすると、コピーし、リストの最後に追加する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-ul li' ) . click( function () {
jQuery( this ) . clone( true ) . appendTo( '#jquery-sample-ul' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-ul li' ) . click( function () {
jQuery( this ) . clone( true ) . appendTo( '#jquery-sample-ul' );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample-ul li{
cursor: pointer;
}
-->
</style>
<!--
#jquery-sample-ul li{
cursor: pointer;
}
-->
</style>
HTML
<ul id="jquery-sample-ul">
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>
<li>項目１</li>
<li>項目２</li>
<li>項目３</li>
</ul>