【发布时间】：2020-06-20 07:52:51
【问题描述】：
上下文：我有一个 HTML 表格，其中包含特定用户的一些数据。每行旁边都有一个删除和一个编辑按钮。我希望按钮执行它们应该对特定行执行的操作。目前删除按钮正在工作，我为编辑按钮尝试了类似的方法，但点击时没有任何反应。
这是 HTML 的一部分：
{% for work_entry in work_entries %}
{% if work_entry.date == date.date %}
<form method="POST" id="{{ work_entry.id }}">
{% csrf_token %}
<tr>
{% if work_entry.is_paid == False %}
<td> <button class="delete-button" id="{{ work_entry.id }}" style="background-color: #bb1a1a;"
onclick="return confirm('Please confirm you wish to delete the selected record.')">Delete
</button>
</td>
<td> <button class="edit-button" id="{{ work_entry.id }}" style="background-color: #5dbb1a;"
onclick="return confirm('Please confirm you wish to edit the selected record.')">Update
</button>
</td>
<td>{{ work_entry.project }}</td>
<td><input style="border: none" class="table-input" type="text" id="description-{{ work_entry.id }}"
value="{{ work_entry.description }}"></td>
<td><input type="number" class="table-input" step="0.01" id="hours-{{ work_entry.id }}"
value="{{ work_entry.num_hours }}"></td>
这是js：（抱歉有点长，但应该直截了当）
$(document).ready(function () {
$(".delete-button").click(function (e) {
var id = $(this).attr('id')
e.preventDefault();
$.ajax({
type:'POST',
url:'{% url 'work_entries:object_delete' %}',
data:{
id: id,
action: 'post'
},
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success:function(response){
$(".main-table").html(response)
},
error : function(xhr,errmsg,err) {
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
});
});
$(document).ready(function () {
$(".edit-button").click(function (e) {
var id = $(this).attr('id')
e.preventDefault();
$.ajax({
type:'POST',
url:'{% url 'work_entries:object_edit' %}',
data:{
id: id,
description: $('#description-id'),
hours: $('#hours-id'),
action: 'post'
},
beforeSend: function(xhr) {
xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
},
success:function(response){
$(".main-table").html(response)
},
error : function(xhr,errmsg,err) {
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
});
});
从我所看到的情况来看，编辑按钮什么也不做，因为它甚至没有进入视图，也没有给出错误。我认为删除和编辑按钮之间存在重叠，但我在互联网上没有找到任何关于此的内容。有什么帮助和建议吗？
另请注意：这些行意味着有 2 个输入，以允许用户更改描述和时间。然后应该通过编辑按钮将其发送到视图，其中我有一个更新该记录的功能。
【问题讨论】：
标签： python html jquery django ajax