テーブルの最後の行がプッシュされたボタンに関係なく削除される

Question

JavaScriptを使用して、テーブルを作成してDOMを操作しています。考えられるのは、生成されたテーブルは、各行の横にあるボタンを使用した払戻しの一覧であり、マネージャは払い戻しを承認または却下することができます。 HTMLでテーブルを生成するロジックは次のとおりです。

var r; 
for (r in ajaxObject) { 
    document.getElementById("reTable").innerHTML += "<tr>" + 
    "<td>" + ajaxObject[r].reimbursementId + "</td>" + 
    "<td>" + ajaxObject[r].amount + "</td>" + 
    "<td>" + ajaxObject[r].statusName + "</td>" + 
    "<td>" + ajaxObject[r].description + "</td>" + 
    "<td>" + ajaxObject[r].dateSubmitted + "</td>" + 
    "<td>" + ajaxObject[r].reimbursementTypeName + "</td>" + 
    "<td><button id=\"accept" + r + "\">Accept</button></td>" + 
    "<td><button id=\"deny" + r + "\">Deny</button></td>" + 
    "</tr>"; 
} 
r = 0; 
for (r in ajaxObject) { 
    var e; 
    e = document.getElementById("accept" + r); 
    console.log(e); 
    e.onclick = function() { approveRe(ajaxObject[r].reimbursementId) }; 
    console.log(e.onclick); 
    e = document.getElementById("deny" + r); 
    console.log(e); 
    e.onclick = function() { denyRe(ajaxObject[r].reimbursementId) }; 
    console.log(e.onclick); 
} 

残念ながら、私は非常に奇妙な問題に遭遇しています。どの承認ボタンまたは拒否ボタンを押しても、テーブルの最後の行は削除されます。ボタンのonclickイベントに付随する関数は、呼び出されるまで実際には "ajaxObject [r] .reimbursementId"を評価しないので、 "r"はインデックスに等しいという事実と関係していると思いますテーブルの最後の行の私はこれをどのように回避することができるのだろうかと思っていた。ありがとう！

Answer 1

イベントハンドラを定義して、囲みスコープから使用している変数の値を修正するときは、クロージャを使用する必要があります。

ので、代わりに：

e.onclick = function() { approveRe(ajaxObject[r].reimbursementId) }; 

あなたはどうなる：

(function(e, id) { e.onclick = function() { approveRe(id); })(e, ajaxObject[r].reimbursementId); 

代わりに、要素のidを保存し、あなたはすべてのケースのために使用する一般的なイベントハンドラでそれを取得することができます。あなたは、このように要素を定義します

<button id=\"accept" + r + "\" data-id=\"" + ajaxObject[r].reimbursementId + "\">Accept</button> 

そして機能ハンドラ内でその値を取得する：

function acceptHandler(e) { 
    ... 
} 

ので、イベントハンドラを割り当てます。

e.onclick = acceptHandler; 

私は内容を残しますエクササイズとしてのイベントハンドラ。それは困難ではありません - イベントターゲット（ハンドラに渡されるイベントのメンバ）からdata-id属性の値（getAttribute）を取得し、それに基づいて処理します。

これはjQueryではかなり簡単だと付け加えます。上記のIDを格納し、テーブルで委任されたイベントハンドラを使用し、クラスごとに承認または拒否ボタンを選択します。