这是我的代码:
$( document ).ready(function() {
$('#myModal1').on('shown.bs.modal', function (event) {
$(".save_profile_name").click(function(){
var pro_id = $("#profile_id").val();
var pro_name = $("#profile_name").val();
var pro_description = $("#profile_description").val();
if (pro_id != ""){
$.ajax({
type: "POST",
url: "myURL",
data: {
pro_id: pro_id,
pro_name: pro_name,
pro_description: pro_description
}
}).done(function( json ) {
$('#myModal1').modal('hide');
});
}else{
$.ajax({
type: "POST",
url: "myURL",
data: {
pro_id: pro_id,
pro_name: pro_name,
pro_description: pro_description
}
}) .done(function( event ) {
$('#myModal1').modal('hide');
});
}
});
});
我有一个带有表单的boostrap的模态,它在db中执行插入或更新。它运行正常,但我的问题是当我通过ajax在db中添加一个新项目之后,当我想添加另一个项目时,不知何故它在db中插入相同的项目两次,之后我添加另一个项目,它在db中插入相同的项 3次,... 4次....并且循环重复。但是如果我在ajax事件之后刷新页面,它可以正常工作。有人可以帮忙吗?
答案 0 :(得分:2)
我猜你的on-click事件可能不止一次触发,因为它在链中多次绑定到元素。
我建议将你的ajax代码拉出到一个单独的函数中,然后调用.unbind.bind,以确保只调用一次处理程序,如下所示:
var handleProfileClick = function() {
var pro_id = $("#profile_id").val();
var pro_name = $("#profile_name").val();
var pro_description = $("#profile_description").val();
if (pro_id != ""){
$.ajax({
type: "POST",
url: "myURL",
data: {
pro_id : pro_id,
pro_name : pro_name,
pro_description : pro_description
}
}).done(function( json ) {
$('#myModal1').modal('hide');
});
}else{
$.ajax({
type: "POST",
url: "myURL",
data: {
pro_id : pro_id,
pro_name : pro_name,
pro_description : pro_description
}
}) .done(function( event ) {
$('#myModal1').modal('hide');
});
}
}
var handleModalShow = function(event) {
// do anything else you need here, or just delete the function
}
$('#myModal1').on('shown.bs.modal', function (event) {
handleModalShow();
});
$("#myModal1 .save_profile_name").unbind('click', handleProfileClick).bind('click', handleProfileClick)