提交前删除表格

Question

我有一个页面通过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;
});

我的问题是，如果我多次加载此上传页面，则会创建多个表单，因此多次发送和上传相同的信息。

我如何删除之前创建的旧表单，所以无论用户已加载该节多少次，每次用户单击“提交”都仅提交一个表单？

先感谢您。

Answer 1

根据对问题的评论，看起来问题的根源是这样的：

$(document).on('submit', '#upload', function() {
    //...
});

由于这是通过AJAX加载的内容的一部分，因此每次加载内容时都会执行。 具体来说，这是在document元素中添加一个submit处理程序。 因此，每次加载内容时，都会添加另一个submit处理程序。 当所有这些处理程序都执行时，它们都将执行相同的操作。

如果您确实希望将处理程序包含在内容中，请直接绑定到元素：

$('#upload').on('submit', function() {
    //...
});

只要销毁了#upload元素，并且每次加载内容时都创建了一个新元素，附加到该元素的任何处理程序也会被销毁。

但是，老实说，我建议另一种方法。 将功能与内容分开。 将您的submit处理程序保持在document上，但是将代码移到整个“父”页面而不是动态加载的内容中。 这样，它仅在页面加载时执行一次，而无需再次执行。

尽可能多地刷新内容 ，但一次定义整体功能 。