当我使用 jquery 加载时，表单没有序列化

Question

例如，我正在加载一个包含另一个页面内容的 div：

$("#content").load("<?php echo Config::get('URL'); ?>employment/new_employment" + " #inner_main_content");

我已将表单序列化数据存储在主页上的页脚中，

Ajax

   <!-- process add employment form without refreshing, then load the div with the new information !-->
    $('#add_employment_form').submit(function() {
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            data: $(this).serialize(),
            success: function(responseText) {
                $('#add_employment').text("+ <?php echo System::translate("Add employment "); ?>");
                $(".add_qualification_json").slideUp("slow");
                $("#content").load("<?php echo Config::get('URL'); ?>employment/employment" + " #inner_main_content");
            }
        });
        return false; // important: prevent the form from submitting
    });
    <!-- end process add employment form without refreshing, then load the div with the new information !-->

这是我在另一个页面中的表单，它正在加载到带有页眉和页脚的页面中：

表格

<form role="form" action="<?php echo Config::get('URL');?>employment/add_employment" method="POST" id="add_employment_form">

但这不是处理过程，表单会像往常一样继续提交。当表单从另一个页面动态加载时，我们可以不序列化它们吗？

控制台错误：

加载资源失败：服务器响应状态为 404 （未找到）select2.min.js:1 未捕获错误：缺少 jquery.select2 ./select2/core wysihtml5.min.js:20 'Range.detach' 现在是无操作的，因为 每个 DOM (http://dom.spec.whatwg.org/#dom-range-detach)。 http://localhost/github/Logo.png 加载资源失败：服务器响应状态为 404 （未找到）VM143:1 Uncaught SyntaxError: Unexpected token : radLogo.png:1 获取 http://localhost/github/Logo.png 404（未找到）

Answer 1

如果我理解您的问题，您正在动态加载表单，因此事件处理程序可能没有绑定到表单，因为它不存在。

使用事件委托

$('#add_employment_form').submit(function() {

到

$("#content").on("submit", "#add_employment_form", function() {

Answer 2

您需要告诉 jQuery 使用.preventDefault() 阻止事件的正常处理。

改变-

$('#add_employment_form').submit(function() {

到

$('#add_employment_form').submit(function(event) {
  event.preventDefault();