我有一系列嵌套的 Ajax 呼叫來創建資料并將其更新到資料庫中，并在成功提交資料后呼叫更新的串列。
這就是代碼的作業方式：
(1) 頁面渲染時會顯示一個交易串列，每一行都可以被用戶編輯。
(2) 單擊特定行時，我運行 Ajax 呼叫以檢索填充了要更新的資料的表單
(3) 然后表單也通過 Ajax 提交。
(4) 如果成功提交，則執行另一個 Ajax 呼叫以更新表。
第一個問題：當表格通過 Ajax 加載時，“編輯”按鈕不再起作用。第二個問題：更新和創建時顯示的表格是一樣的，只是更新時表格是預填的。我想避免重復 Ajax 呼叫，但我必須這樣做，否則在從第一個 Ajax 呼叫（第 1 點）加載表單后，我無法提交表單。有沒有辦法制作更干凈的代碼？
這是javascript代碼，服務器端一切正常：
$(".edit-transaction").click(function () {
// obtain the object id to load the correct form
const object_id = $(this).data('object-id');
// request the form via AJAX Get request
$.ajax({
type: 'GET',
url: "/transaction/",
data: {
'slug': object_id
},
success: function(response) {
// Get the form for the requested object
$("#display-form").html(response.html); // this code retrive the form
$("#transaction-form").submit(function (e) {
// preventing from page reload and default actions
e.preventDefault();
let serializedData = $(this).serialize();
// Update the form via AJAX
$.ajax({
type: 'POST',
url: "/transaction/",
data: serializedData,
success: function (response) {
console.log('updated successfully')
// load the table with the new content updated
$.ajax({
type: 'GET',
url: "/get-transactions-list/",
success: function (data) {
$("#display-transaction-list").html(data.html);
},
});
},
error: function (response) {
let error = response ["responseJSON"]["error"];
$.each(error, function (code, message) {
alert('message');
});
}
})
})
},
error: function (response) {
let error = response ["responseJSON"]["error"];
$.each(error, function (code, message) {
alert('message');
});
}
})
});
$("#transaction-form").submit(function (e) {
// preventing from page reload and default actions
e.preventDefault();
let serializedData = $(this).serialize();
// Create a new transaction via AJAX
$.ajax({
type: 'POST',
url: "/transaction/",
data: serializedData,
success: function (response) {
console.log('created successfully')
// load the table with the new content updated
$.ajax({
type: 'GET',
url: "/get-transactions-list/",
success: function (data) {
$("#display-transaction-list").html(data.html);
},
});
},
error: function (response) {
let error = response ["responseJSON"]["error"];
$.each(error, function (code, message) {
alert('message');
});
}
})
})
謝謝你的幫助
uj5u.com熱心網友回復：
由于某些元素是異步添加的，這意味著在運行時添加的事件偵聽器不會影響這些元素。相反，您應該通過“事件委托”收聽有關它們的事件。
您還可以創建自定義事件來加載表格內容。因此，要更新表格，您只需.trigger()自定義事件。當您想要實作需要表更新（如洗掉等）的其他功能時，這很有用。
// custom event for loading the table content
$(document).on('load.table', '#display-transaction-list', function () {
const $table = $(this);
$.ajax({
type: 'GET',
url: "/get-transactions-list/",
success: (data) => $table.html(data.html)
});
});
// edit transaction event
$(document).on('click', '.edit-transaction', function () {
// obtain the object id to load the correct form
const object_id = $(this).data('object-id');
// request the form via AJAX Get request
$.ajax({
type: 'GET',
url: "/transaction/",
data: {
'slug': object_id
},
success: function(response) {
// Get the form for the requested object
$("#display-form").html(response.html); // this code retrive the form
},
error: function (response) {
let error = response ["responseJSON"]["error"];
$.each(error, function (code, message) {
alert('message');
});
}
})
});
// save transaction event
$(document).on('submit', '#transaction-form', function (e) {
// preventing from page reload and default actions
e.preventDefault();
let serializedData = $(this).serialize();
// Update the form via AJAX
$.ajax({
type: 'POST',
url: "/transaction/",
data: serializedData,
success: function (response) {
// you can add some data to the response
// to differentiate between created and updated. Eg response.actionType
console.log('created or updated successfully')
// load the table with the new content updated
$("#display-transaction-list").trigger('load.table');
},
error: function (response) {
let error = response ["responseJSON"]["error"];
$.each(error, function (code, message) {
alert('message');
});
}
})
})轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/424077.html
標籤：javascript jQuery 阿贾克斯
上一篇：使用AJAX單擊時獲取Div值