[英]Getting the value of a specific input that is dynamically added from an ajax call
我想在onclick
事件上獲取特定輸入的值
這個 function 從我的后端檢索所有數據
Javascript
function getProjects() {
$.ajax({
method: 'GET',
dataType: 'json',
data: {
functionToCall: 'project',
},
url: 'http://localhost/WBS/php/api/requests/get.php',
success: (response) => {
$.each(response, function () {
$.each(this, function (index, value) {
$('#project-body').append(
`
<tr>
<td>
<input class="form-control projectid" type="hidden" name="projectid[]" value="${value.projectid}">
</td>
<td>
<input class="form-control projectName" type="text" name="projectName[]" value="${value.title}">
</td>
<td>
<input class="form-control description" type="text" name="description[]" value="${value.description}">
</td>
<td>
<input class="form-control estimatedTime" type="text" name="estimatedTime[]" value="${value.Estimated_time}">
</td>
<td>
<input class="form-control actualTime" type="text" name="actualTime[]" value="${value.Actual_time}">
</td>
<td>
<a class="btn btn-info addTask" href="Overview.html?id=${value.projectid}" role="button">
<i class="fa fa-angle-right" aria-hidden="true"> </i> Add task
</a>
</td>
<td>
<button value="${value.projectid}" type="button" name="deleteProject" class="btn btn-danger deleteProject">
<i class="fa fa-angle-right" aria-hidden="true"> </i> Delete project
</button>
</td>
</tr>
`
);
});
});
},
error: () => {
console.error('Something went wrong with the getProjects function');
},
});
}
我想得到這個特定輸入的值
<td>
<input class="form-control projectid" type="hidden" name="projectid[]" value="${value.projectid}">
</td>
我試過用這個
$(document).on('click', '.btn.btn-danger.deleteProject', () => {
let id = $(this).find('tr').closest('.form-control.projectid');
deleteProject(id); // this is an ajax call that deletes a project with said ID
});
但是console.logging這在所有按鈕點擊上都返回未定義,我嘗試對其進行硬編碼
$(document).on('click', '.btn.btn-danger.deleteProject', () => {
let id = $('.btn.btn-danger.deleteProject').val();
deleteProject(id);
});
這會返回一個 ID,問題是它始終只返回第一個 ID。
我的問題是,如何從 onclick 事件中獲取所述輸入值?
closest
測試元素本身及其ancestors
是否匹配選擇器。
您需要做的是:找到最接近單擊按鈕的tr
,然后在該tr
內部找到輸入,如下所示:
$(document).on('click', '.btn.btn-danger.deleteProject', function() {
const id = $(this).closest('tr').find('.form-control.projectid').val();
deleteProject(id);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.