5

DOM を元の状態にリセットしてから、再度操作したいと考えています。

これを行う最良の方法は次のとおりです。

// Clone the Dom and assign it to a variable
divClone = $("#document").clone();

// .... More Code ......

// When required, replace the DOM with with the cloned variable. 
       $("#document").replaceWith(divClone);

唯一の問題は、新しくリセットされた DOM を再び操作できないことです。

クラスを追加する簡単な例を使用するJSFiddleをまとめました。「テスト」リンクをクリックして、クラスを追加できます。[リセット] をクリックすると、DOM を元の状態に戻すことができます。ただし、「テスト」リンクをもう一度クリックすると、復元された DOM にクラスが追加されなくなります。(明らかに、これは単なる単純化された例です。クラスを削除および追加するより良い方法があります)。

復元された DOM を操作するにはどうすればよいですか?

4

1 に答える 1

5

コードは期待どおりに動作します。問題は、複製した DOM にハンドラーがバインドされていないことです。

2 つのオプションがあります。1 つ目は、すべてのハンドラーがバインドされた後にクローンを作成trueし、withDataAndEvents cloneメソッド引数に渡すことです。

$(".test").click(function() {
    $("#document").addClass("green");
});

$(".reset").click(function() {
    $("#document").replaceWith(divClone.clone(true));
});

var divClone = $("#document").clone(true);

フィドル

2 番目のオプションは、イベント委任を使用することです。

var divClone = $("#document").clone();

$(document).on('click', '.test', function() {
    $("#document").addClass("green");
}).on('click', '.reset', function() {
    $("#document").replaceWith(divClone.clone());
});

フィドル

この 2 番目のアプローチの欠点は、すべてのイベントがドキュメント レベルまでバブリングする必要があり、バブリングをキャンセルできないことですevent.stopPropagation()。

編集：元のクローンが初期状態で常に安全であり、後のリセットのベースとして機能できるように、クローンのクローンに置き換えるための回答を更新しました。

于 2012-11-11T16:48:59.377 に答える