javascript - 如何在按钮单击时获得Ajax响应

我从ajax响应中获取表数据为json。一些json数据没有显示，但我希望通过单击按钮将其用于其他目的，如何获得它？请帮助我。

 function leaveTable() {
     for (var i = 0; i < leaveList.length; i++) {
         var tab = '<tr id="' + i + '"><td>' + (i + 1) + '</td><td class="appliedOn">' + leaveList[i].appliedOn + '</td><td class="levType" >' + leaveList[i].levType + '</td><td class="leaveOn" >' + leaveList[i].leaveOn + '</td><td class="duration">' + leaveList[i].duration + '</td><td class="status">' + leaveList[i].status + '</td><td class="approvedOn">' + leaveList[i].approvedOn + '</td><td class="approvedBy">' + leaveList[i].approvedBy + '</td><td><i class="btn dltLev fa fa-times" onclick="cancelLeave(this)" data-dismiss="modal"  value="Cancelled"></i></td><tr>';

         $('#levListTable').append(tab)
     }
 }

从ajax响应中我想要leaveTypeId并将其传递给sendCancelReq()函数。
完整代码：https://jsfiddle.net/tytzuckz/18/

最佳答案

确切地知道您想要什么是复杂的。希望对您有所帮助：

首先，我要更改的是，不要在您的html代码var tab = ...中产生JavaScript事件。我认为，在创建新的dom元素后添加事件时，它更加清晰易读。例如：

var tab = $('<tr id="' + i + '">' +
  '<td>' + (i + 1) + '</td>' +
  '<td class="appliedOn">' + leaveList[i].appliedOn + '</td>' +
  '<td class="levType" >' + leaveList[i].levType + '</td>' +
  '<td class="leaveOn" >' + leaveList[i].leaveOn + '</td>' +
  '<td class="duration">' + leaveList[i].duration + '</td>' +
  '<td class="status">' + leaveList[i].status + '</td>' +
  '<td class="approvedOn">' + leaveList[i].approvedOn + '</td>' +
  '<td class="approvedBy">' + leaveList[i].approvedBy + '</td>' +
  '<td><i class="btn dltLev fa fa-times" data-dismiss="modal"  value="Cancelled"></i></td>' +
  '<tr>');
$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });

然后，您可以更清晰地发送必要的信息，例如：

代替最后的代码

$(tab).find('.btn.dltLev').click(function () { cancelLeave(this); });

你可以写

$(tab).find('.btn.dltLev').click(function () { cancelLeave(this, leaveList[i].leaveTypeId); });

并将您的方法cancelLeave扩展为：

function cancelLeave(elem, leaveTypeId) {
  var id = $(elem).closest('tr').attr('id')
  alert(id)
  $("#cancelLeave").modal("show");
  $('.sendCancelReq').val(id);
  sendCancelReq(leaveTypeId);

}