jQueryに要素のコンテンツを複製する方法はありますか?要素全体ではなく、コンテンツ(子)のみ。
何をしているのかと似てい.html()
ますが、コンテンツに添付されているイベントのクローンを作成することにも興味があります。
見ていました.clone
が、要素全体のクローンを作成しているようです。
ありがとう。
jQueryに要素のコンテンツを複製する方法はありますか?要素全体ではなく、コンテンツ(子)のみ。
何をしているのかと似てい.html()
ますが、コンテンツに添付されているイベントのクローンを作成することにも興味があります。
見ていました.clone
が、要素全体のクローンを作成しているようです。
ありがとう。
Doua Beriは、jQuery APIのドキュメント.clone()
を参照すると、必要なものがであることがわかります.clone(true,true)
。これにより、すべてのデータとイベントバインディングを含む、要素(または要素のコレクション)のディープコピーが作成されます。
次に、の使用方法に関して2つのオプションを選択できます.clone(true,true)
。
子を個別に複製して、子のクローンを含むjQueryコレクションを作成します。
var $childClones = $("#myElement").children().clone(true,true);
外側の要素のクローンを作成して、外側の要素のクローンを含むjQueryコレクションを作成します。これには、子のクローンが含まれています。
var $clone = $("#myElement").clone(true,true);
どちらのアプローチを採用するかは、やや学術的です。どちらの場合も、子孫要素は集合的または個別に操作および/またはDOMに挿入できますが、そのためのコードはわずかに異なります。
ディープ コピーが必要な場合は、子のクローンを作成します。
$('#footer-flair').children().clone()
また、特定の要素にイベントをアタッチする代わりに、子要素をリッスンしているコンテナ要素にイベントをアタッチします。これにより、コンテナ内に何千もの要素を追加/削除しても、コンテナ要素が残っている限りイベントが発生します。イベントを消したくない場合は、 body タグでこれを行うことができます。
「on」メソッドを使用して、次のようにイベントをバインドします。
$('body').on('click', 'button.className', function(){
alert('button clicked');
});