将 JSON 数组传递到按钮 jQuery 的动态创建的 onclick 方法中

Question

以下是我的代码和数据是 json 数组，我想传入更新按钮的 onclick 方法

function populateData(data) {
$(".studentPanel").show();
for (var i = 0; i < data.length; i++) {
$(".totalFee" + i).val(data[i].total.amount);
for (var j = 0; j < data[i].submissions.length; j++) {
var ts = new Date(data[i].submissions[j].created_at);
var dateString = ts.getDate() + "-" + ts.getMonth() + "-" + ts.getYear();
console.log(data[i].submissions[j].amount);
var tableRows = "<tr><td>" + data[i].submissions[j].amount + "</td><td>" + dateString + "</td>" +
"<td><button class="btn btn-primary Update" onclick='updateFees("" + data[i].submissions[j].id + "")'>Update</button></td><td><button  onclick='deleteFees("" + data[i].submissions[j].id + "")'  class="btn btn-danger Delete">Delete</button></td>n</tr>";
console.log(tableRows);
$(".feeTable" + i).append(tableRows);
}
}
}

Answer 1

由于您似乎正在使用jQuery，因此我建议您手动添加侦听器，但是要做到这一点，您需要先创建元素并将它们存储在变量中。

Obs.：这段代码可以做得更短更简单，但为了可读性，我这样做了。

function populateData(data) {
$(".studentPanel").show();
for (var i = 0; i < data.length; i++) {
$(".totalFee" + i).val(data[i].total.amount);
for (var j = 0; j < data[i].submissions.length; j++) {
var ts = new Date(data[i].submissions[j].created_at);
var dateString = ts.getDate() + "-" + ts.getMonth() + "-" + ts.getYear();
console.log(data[i].submissions[j].amount);
var
tr = $("<tr>"),
td1 = $("<td>"),
td2 = $("<td>"),
td3 = $("<td>"),
td4 = $("<td>"),
btnUpdate = $("<button class='btn btn-primary Update'>"),
btnDelete = $("<button class='btn btn-danger Delete'>");
$(".feeTable" + i).append(tr);
tr.append(td1).append(td2).append(td3).append(td4);
td1.append(data[i].submissions[j].amount);
td2.append(dateString);
td3.append(btnUpdate);
td4.append(btnDelete);
btnUpdate.append("Update");
btnDelete.append("Delete");
btnUpdate.click((event) => {
//put whatever your updateFees function does in here
console.log(event);
console.log(data[i].submissions[j].id); //your data is acessible
});
btnDelete.click((event) => {
//put whatever your deleteFees function does in here
console.log(event);
console.log(data[i].submissions[j].id); //your data is acessible
});
}
}
}

我还建议你好好看看jQuery和javascript的好实践。

Answer 2

这可以使用 data-id 属性来完成。 前任：

var tableRows = "<tr>"+
"<td>" + data[i].submissions[j].amount + "</td>"+
"<td>" + dateString + "</td>" +
"<td>"+
"<button class='btn btn-primary Update' data-id=" + data[i].submissions[j].id + " onclick='updateFees()'>"+
"Update"+
"</button>"+
"</td>"+
"<td>"+
"<button onclick='deleteFees()' class='btn btn-danger Delete' data-id=" + data[i].submissions[j].id + ">"+
"Delete"+
"</button>"+
"</td>"+
"</tr>";

然后在 updateFee 和 deleteFee 的函数体中，可以按以下方式访问此 id：

function updateFees(e){
var id = $(e.currentTarget).data("id");
//Rest of the code follows here
}