新しく作成した要素を親ウィンドウに追加するときの.data（）値の保存

Question

AJAXリクエストからのJSON応答を解析するポップアップでjQueryコードを実行しています。その一環として、<tr>要素の一連の要素と、親ウィンドウ内のテーブルを更新するために、.data()関数を使用してデータ属性が割り当てられたアンカー要素を含む内容を動的に作成します。

このコードは期待どおり動作します。行は正しい内容で作成され、メインウィンドウの表に追加されます。 1つの小さな問題があります。アンカー要素に添付されたデータは消えます。

JSONレスポンスは、この（関連部分はlocationList配列である）のようになります。

{ 
    "locationList": [{ 
    "name": "All locations", 
    "locid": "-1", 
    "countryid": "-1", 
    "imtid": "-1" 
    }], 
    "countries": [ 
    { 
     "value": "-1", 
     "text": "All" 
    }, 
    { 
     "value": "258", 
     "text": "Ireland" 
    }, 
    { 
     "value": "246", 
     "text": "Sub SA" 
    }, 
    { 
     "value": "261", 
     "text": "United Kingdom" 
    } 
    ], 
    "locations": [{ 
    "value": "-1", 
    "text": "All" 
    }] 
} 

とJavaScriptは次のようになります。

var $locations = opener.$('#document-content-locations'); 
$locations.empty(); 
for(var i = 0; i < data.locationList.length; i++) { 
    var location = data.locationList[i]; 
    var rowClass = (i % 2 == 0) ? "odd" : "even"; 
    var row = $('<tr/>').addClass(rowClass); 
    row.append($('<td/>').text(location.name)); 
    var link = $('<a/>').attr('href', '#').data({locid: location.locid, countryid: location.countryid, imtid: location.imtid}).text('remove').addClass('removelocation'); 
    console.log(link.data()); 
    row.append($('<td/>').append(link)); 
    console.log(row.find('a').data()); 
    $locations.append(row); 
    console.log($locations.find('a').data()); 
} 

console.log呼び出しが監視することです要素dataをさまざまな段階で使用します。コンソール出力：

Object { locid="-1", countryid="-1", imtid="-1"} 
Object { locid="-1", countryid="-1", imtid="-1"} 
Object {} 

私は、何が起こっているは、要素（マイナスデータとイベント情報）をクローニング、むしろ単純にメインウィンドウのテーブルに要素を追加するよりも、.append()への呼び出しがあることだと思うとメインウィンドウのテーブルに追加します。明示的に要素を複製しようとしましたが（データとイベントを保存するためにtrueを渡して）、その要素を追加しましたが、問題は解決しません。

.data()関数を使用するのではなく、HTML5 data-*の属性をHTMLのアンカーに使用して問題を解決できます。それは今のところうまくいきます。少数しかないので、簡単にスケーラブルではありません。

だから、私はいくつかの質問を持っている：

1. が私の考え/仮定が正しい可能性が高いですか？ .append()を新しく作成した要素をポップアップから呼び出すと、要素を複製する可能性のある親ウィンドウの 要素に追加する必要があります（これは理由がないようですが）。
2. .append()（と同様の機能）に、実行の一部として作成するクローンのデータとイベントを保存するように指示します（私は考えません）これはデフォルトで行います）？
3. 問題を引き起こしている上記のコードに何か本質的に間違っているのですか？

Answer 1

ここで何が起きているのかを知り、私が抱えていた問題を引き起こすのは、しばらく（約1年 - 私が最初に理解したときにこれに戻ってきたことを忘れていました）私は質問をしたときにDOMノードに対してデータがどのように格納されたかについて実際には理解していませんでしたが、.data()を呼び出して値を取得するときに、内部的に何が起こっているのかが完全にはわかりません。

DOMノードの場合jQueryには、すべてのデータを格納するために使用するグローバルキャッシュがあります。各ノードには、後でその特定のノードのデータをキャッシュから取り出すためのキーとして機能する一意のIDが割り当てられます。

これはすべて比較的簡単なので、ブラウザウィンドウ間ではどうして動作しませんか？答えは（今）明らかです：それぞれ別々のウィンドウには独自のグローバルキャッシュがあり、子（ポップアップ）ウィンドウでデータを設定するときに生成される一意のIDは、親ウィンドウのグローバルキャッシュ内のエントリと一致しません（ifそれはまったく転送されます）。

Answer 2

.append（）のように動き、時にはクローンのように見えます。

http://welcome.totheinter.net/2009/03/19/the-undocumented-life-of-jquerys-append/

I）は、（.appendを使用して同じことを見てきました。私の場合、アンカーをプログラムで作成し、イベントハンドラをバインドします。次に、アンカーオブジェクトをDOM内の他の場所に貼り付けると、イベントハンドラが失われます。