我有一个表格,其中向用户显示了一些数据。有用于对数据进行 CRUD 处理的按钮,我在前端使用 jQuery。当按下按钮时,会显示一个模式并通过 ajax 请求更新数据。
我的问题是:如果我单击更新按钮,关闭模式,单击另一个更新按钮并更新数据,它会在每个单击的行上保存相同的新数据。简而言之,我的代码被执行了多次,与我执行的点击次数一样多。
这是我的代码: http: //pastebin.com/QWQHM6aW
$(document).ready(function() {
/*--------------------------------------------*/
// GENERAL
/*--------------------------------------------*/
function loadingStart() {
$("#overlay").show();
$("#loading").show();
}
function loadingDone() {
$("#overlay").hide();
$("#loading").hide();
}
$(document).ajaxStop(function() {
loadingDone();
//alert('Ajax Terminou');
});
function reloadRows() {
$.post("ajax.php", { type: "AllRows" }) // Faz um post do tipo AllRows.
.done(function(data) {
alert(data);
//$("#tbody").html(data);
});
}
$("body").on("click", ".update-socio-btn", updateSocio);
/*--------------------------------------------*/
// UPDATE
/*--------------------------------------------*/
function updateSocio(event) {
$("#socio-form input").val(''); // Apagar os valores do form.
loadingStart(); // Começar o Loading...
var id = $(this).closest('tr').find('.id-holder').html(); // Pegar o valor do id holder e salvar na var id.
$("#socio-form input").removeClass("input-transparent").prop("disabled", false); // Queremos ver e utilizar os inputs.
$(".modal-footer").removeClass("hidden"); // Queremos ver o footer do modal.
$(".btn-modal").attr("id", "update-btn-confirm"); // Atribui o id: update-btn-confirm ao .btn-modal.
$.post("ajax.php", { type: "read", id: id }) // Faz um post do tipo Read e retorna os valores nos inputs correspondentes
.done(function(data) {
console.log('read');
jsonOBJ = jQuery.parseJSON(data);
for (var key in jsonOBJ) {
$("input[name=" + key + "]").val(jsonOBJ[key]);
}
});
$("#update-btn-confirm").click(function() { // Quando clicar no botão de salvar.
var formArray = $("#socio-form").serializeArray(); // Pega todas as informações dos inputs e transforma em um array json.
$.post("ajax.php", { type: "update", id: id, inputs: formArray }) // Faz um post do tipo Update.
.done(function(data) {
console.log('uptade');
alert(data);
event.stopPropagation();
});
});
event.preventDefault();
}
});
我强烈怀疑问题出在.on
方法上,但我很难确定它。我知道我可以使用.live()
or .bind()
,但我试图避免它,因为两者都已弃用。
有什么建议么?