4

私はを使用していますjQuery 1.9.0、そして私のhtmlは：

<div id='div1'>    
</div>
<div id='div2'>
</div>

私のjs：

var input = $("<input type='text'>");
$('#div1').html(input);
$('#div2').html(input);

このコードの私の理解は

inputはjQueryオブジェクトであり、プログラミング言語で1つの変数の値を他の多くの変数に割り当てるのと同じように、div1とdiv2を別々に設定できます。

この理解に基づいて、私が期待するのは次のとおりです。

<div id='div1'>
    <input type="text">
</div>
<div id='div2'>
    <input type="text">
</div>

しかし、私は得る：

<div id='div1'>
</div>
<div id='div2'>
    <input type="text">
</div>

と呼ぶだけなら、$('#div1').html(input);要素があります。呼び出し後にの要素が消えるのはなぜですか？div1inputdiv1input$('#div2').html(input);

この問題を回避する方法は知っていますが、この動作の理由を知りたいと思っています。

前もって感謝します！

アップデート：

この問題に心から答えてくれたすべての人に感謝し、すべての答えに投票しました。私は今この問題の手がかりを持っていますが、なぜ異なるノード（div1とdiv2）が同じオブジェクトを参照できないのか疑問に思っています。言語ではC、異なる変数が同じメモリアドレスを参照できます。これら2つの違いは何referenceですか？

4

4 に答える 4

4

参照の問題を回避するために、クローンを作成します（以下に詳細を追加）:)

var input = $("<input type='text'>");
$('#div1').html(input.clone());
$('#div2').html(input.clone());

これが発生する理由は、入力がjQueryオブジェクトであるためです。参考として考えてください。初めて入力を使用するとき#div1はそれを消費しますが、参照はまだメモリ内にあり、追加する#div2と再消費します。

于 2013-01-23T13:37:21.383 に答える
2

これを試して。inputDOM内の特定のノードにのみ属することができます。同じノードが親としての両方div1を持つことはできません。div2 代わりに、のコピーを作成inputして他のノードに追加します。

var input = $("<input type='text'>");

$(input).clone().appendTo('#div1');
$(input).clone().appendTo('#div2');
于 2013-01-23T13:40:25.263 に答える
1

肝心なのは、ページのどこかに要素を添付しても、DOMは要素を自動的に複製しないということです。これはjQuery固有ではありません。

input同じ要素を参照し続けるため、input後で別の要素にアタッチすると、前の場所からその要素が切り離さinputれ、DOM内を移動し続けます。

これが、要素をアタッチする前に要素のクローンを作成する必要がある理由です:)

于 2013-01-23T13:42:52.657 に答える
0

このページを見てみませんか？http://javascript.info/tutorial/memory-leaks

これはJSのガベージコレクターメカニズムに関連していると思います。

于 2013-01-23T16:21:51.643 に答える