JSONファイルでTD IDの動的IDを保存する

Question

さて、jsonファイルからデータを取得していますが、同時にそれらをテーブルに入れています。私はすべてのTDアイテムに動的IDを与えることに成功しました。しかし、そのidはhtml内でしかアクセスできません。関数に使用しようとすると、定義されていないか、id以外のすべての行の長さが取得されています。

<script type='text/javascript'> 
var dynID; 

$(function() { 

var data = []; 

    $.getJSON('f-data.json', function(data) { 
    $.each(data.data, function(i, f) { 
    var tblRow = "<tr><th>" + '<td id = "editable'+this.id+'">' + f.Title+ "</td></th>"; 

    dynID = $(this).find("td").attr("id"); 
    tblRow += '<th colspan="2"><button type ="submit" class="edit" onclick="editButton(dynID)"></i></button>'; 


    $(tblRow).appendTo(".screens tbody"); 

}); 

}); 

}); 

<script type='text/javascript'> 
function editButton(id) { 

    alert(id); 

} 

はJSON：

{ "data":[ 
    { 
    "Title": "Screen 1", 
    "id": 1 
},{ 
    "Title": "Screen 2", 
    "id": 2 
} 

は、上のボタンを生成し、ボタンが押されたとき、結果は未定義です。奇妙なことは、IDが正しく生成されていることです（例えば、editable1、editable2など）。私はIDを正しく選択していないと思いますか？

Answer 1

$.eachループ内で参照問題が発生しています。ループの中で、$(this)への参照は、data配列の要素で作られたjQueryオブジェクトです。 HTMLはありません。 tblRowをjQueryオブジェクトとして扱う/解析することを意味し、それからidを抽出することを意味します。これはパフォーマンスにとって悪いことです。あなたの現在のコードは、単にボタンの出力は次のとおりです。

<button onclick="editButton(dynID)"></button> 

dynIDは、文字列の一部になってきているので、これはある - ここに起こって何の連接はありません。したがって、出力はグローバルスコープwindowのdynIDという名前の変数への参照になります。

私はこのコードを以下のように書き直します。

$.each(data.data, function(i, f) { 

    var id = this.id, // use id accross the loop. 
     tblRow = "<tr><th>" + '<td id = "editable' + id +'">' + f.Name + "</td></th>"; 

    tblRow += '<th colspan="2"><button type ="submit" class="edit" onclick="editButton("' + id + '")"></i></button>'; 

    $(tblRow).appendTo(".screens tbody"); 

});