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并在表上使用委托事件处理程序，按类选择批准或拒绝按钮。

无论按下按钮，表中的最后一行都被删除了

1 个答案: