2

操作後にDOMを初期状態に戻すリセットボタンを作成しようとしています。最初の使用では完全に機能しますが、使用後、DOM を再度操作するとリセットできなくなります。

つまり、以下の例で「リセット」をクリックすると、最初は機能しますが、2 回目は機能しません。

HTML

<p>some text</p>
<button class="reset">RESET</button>
<button class="change">Change DOM</button>

JS

$('button.change').on('click', function (){
  $('p').text('some new text');
});

$(document).data('initialState', $('p').clone(true));

$('button.reset').on('click', function (){
  $(document).data('initialState').replaceAll('p');
});

例

initialState の値は、最初に呼び出された後も正しい値を示しているようですが、取得できません。例が何度リセットされても、これを機能させる方法はありますか?

4

2 に答える 2

1

私はそれを修正したと思います。更新された jfiddle はhttp://jsfiddle.net/rk6pm/8/で確認できます。

いくつかの理由 (私には非常にあいまいです) のように見えますが、再度変更した後$(document).data、複製されたデータを保持していません。$('p')$('p')

これは、jQuery の内部動作、または js GC の仕組みが原因で発生する可能性があります。

だから私がしたことは、要素を操作する他の関数の直前に複製/保存されるオブジェクトのクリックハンドラー内のデータ複製/保存関数を移動して、要素(およびそのハンドラー)を複製して新たに保存することでした。で$(document).data。

$('p').on('click', function (){
    $(document).data('initialState', $('p').clone(true));
    $(this).text('some new text');
});

$('button').on('click', function (){
  $(document).data('initialState').replaceAll('p');
});

それは修正されますが、暗示されている内部メカニズムについてはよくわからないため、これに関するjsプロ開発者の意見を本当に聞きたいです(後で元の要素を変更すると、クローンされた要素のデータが消えるのはなぜですか?それは本当に消えますか? ...)

また、余談ですが、間違って使用した場合、私が使用したアプローチが無限に再帰的/リークする動作につながる可能性があります... (できませんか?)

于 2013-10-02T16:32:42.063 に答える