jquery按钮只适用于第一个按钮

Question

我有一个记录表。每个表行都有一个提交按钮——当单击提交按钮时，它会向服务器发出ajax请求。第一个按钮工作，请求被发送到服务器。下一个按钮不起作用，页面每次都会在不该刷新的时候刷新。发生这种情况的原因是什么？我相信这是因为我在按钮上有一个id，它引用了所有记录，但我不确定。

以下是代码片段：

$("#submitBtn").on('click', function(event) {
event.preventDefault();
var registerNo = $('#registerNo').val();
var date = $('#date').val();
var startTime = $('#startTime').val();
var endTime = $('#endTime').val();
var refNo = $('#refNo').val();
var attendance = $("#AttendanceValue option:selected").val();
var obj = {
attendance : attendance,
refNo : refNo,
registerNo : registerNo,
date : date,
startTime : startTime,
endTime : endTime
}
/*
$.ajax({
url: "process.asp",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
data: JSON.stringify(obj),
success: function (response) {
alert(JSON.stringify(response));
},
error: function(response) {
alert('There was an error: ' + response.responseText);
}       
});
*/
console.log(obj); 
});

Answer 1

$("button[name=submitBtn]").on('click', function(event) {
var registerNo = $(this).closest("tr").find('input[name=registerNo]').val();
var date = $(this).closest("tr").find('input[name=date]').val();
var startTime = $(this).closest("tr").find('input[name=startTime]').val();
var endTime = $(this).closest("tr").find('input[name=endTime]').val();
var refNo = $(this).closest("tr").find('input[name=refNo]').val();
var attendance = $(this).closest("tr").find("select[name=AttendanceValue]").val();
var obj = {
attendance : attendance,
refNo : refNo,
registerNo : registerNo,
date : date,
startTime : startTime,
endTime : endTime
}
/*Your AJAX code place here*/
console.log(obj);
});

table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>Reg No</th>
<th>Date</th>
<th>Start time</th>
<th>End time</th>
<th>Ref no</th>
<th>Attendence</th>
</tr>
<tr>
<td><input type="text" name="registerNo"></td>
<td><input type="date" name="date"></td>
<td><input type="time" name="startTime"></td>
<td><input type="time" name="endTime"></td>
<td><input type="text" name="refNo"></td>
<td>
<select name="AttendanceValue"> 
<option value="">select</option>
<option value="Present">Present</option>
<option value="Absent">Absent</option>
</select>
</td>
<td><button type="button" name="submitBtn">submit</button></td>
</tr>
<tr>
<td><input type="text" name="registerNo"></td>
<td><input type="date" name="date"></td>
<td><input type="time" name="startTime"></td>
<td><input type="time" name="endTime"></td>
<td><input type="text" name="refNo"></td>
<td>
<select name="AttendanceValue"> 
<option value="">select</option>
<option value="Present">Present</option>
<option value="Absent">Absent</option>
</select>
</td>
<td><button type="button" name="submitBtn">submit</button></td>
</tr>
<tr>
<td><input type="text" name="registerNo"></td>
<td><input type="date" name="date"></td>
<td><input type="time" name="startTime"></td>
<td><input type="time" name="endTime"></td>
<td><input type="text" name="refNo"></td>
<td>
<select name="AttendanceValue"> 
<option value="">select</option>
<option value="Present">Present</option>
<option value="Absent">Absent</option>
</select>
</td>
<td><button type="button" name="submitBtn">submit</button></td>
</tr>
</table>

不要在任何地方使用ID，因为ID对每个元素都是唯一的，所以请使用名称或类。如果不想在点击按钮的同时重新加载页面，请不要忘记给type＝"；按钮"；在按钮元素中。