我有一个页面可通过AJAX加载部分
例如:
<!-- Email Section -->
<div id=\"email-container\" class=\"body-container hidden\">
</div>
<!-- Users Section -->
<div id=\"user\" class=\"body-container hidden\">
</div>
<!-- File-Upload Section -->
<div id="upload-container" class="body-container hidden">
</div>
当用户单击链接时,“旧”部分消失,而出现“新”部分。 “新”部分已加载并覆盖了之前可能存在的所有数据...
function showSection(section, link) {
$(".body-container").addClass('hidden');
$("#" + section + "-container").removeClass('hidden');
$(".menu-item").removeClass('current-menu-item');
$("#" + link).addClass('current-menu-item');
var jqxhr = $.get("./sections/" + section)
.done(function (response) {
$("#" + section + "-container").html(response);
})
.fail(function () {
// blah
});
在上载部分,我有一个表单,它是通过AJAX提交的。
$(document).on('submit', '#upload', function() {
var form_data = new FormData(this);
$.ajax({
url: 'upload.php',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'post',
success: function(response){
// do stuff with response. Don't care if it fails for now
}
});
return false;
});
我的问题是,如果我多次加载此上传页面,则会创建多个表单,因此多次发送和上传相同的信息。
我如何删除以前创建的旧表单,所以无论用户已加载该节多少次,每次用户单击“提交”都仅提交一个表单?
先谢谢您。
答案 0 :(得分:0)
基于对问题的评论,看来问题的根源是这样:
$(document).on('submit', '#upload', function() {
//...
});
由于这是通过AJAX加载的内容的一部分,因此每次加载内容时都会执行。具体来说,这是在submit
元素中添加document
处理程序。因此,每次加载内容时,都会添加另一个submit
处理程序。当所有这些处理程序执行时,它们都将执行相同的操作。
如果您确实希望将处理程序包含在内容中,请直接绑定到元素:
$('#upload').on('submit', function() {
//...
});
只要#upload
元素被销毁并且每次加载内容时都创建一个新元素,附加到该元素的任何处理程序也会被销毁。
但是,老实说,我推荐另一种方法。将功能与内容分开。将submit
处理程序保持在document
上,但将代码移到整个“父”页面中,而不是动态加载的内容中。这样,它仅在页面加载时执行一次,而无需再次执行。
根据需要经常刷新内容,但一次定义整体功能。