javascript - AJAX 表单提交不重新加载内容

Question

我在这里看到了很多问题和答案，但似乎没有一个能解决我的问题。我有一个表单，它从 ajax 加载调用加载到一个名为动态内容的 div 类中。基本上，如果按下表单提交按钮，我希望它在 ajax 中重新加载此表单，以便它执行 php 表单验证。我的问题是，当提交发生时，我调用 ajax 加载以通过 javascript 重新加载，但它没有触发，而是返回到当前索引页面。我的JS如下：

$(document).ready(function () {
//Handle AJAX request from sidebar buttons
var trigger = $('.submit-btn'),
    container = $('.dynamic-content');

  $(".add-customer-form-btn").submit(function() {
    // do something...
    alert('test');

    container.load('customers/customersaddform.php',$("form").serializeArray());

    return false;
  });

});

我在customersaddform.php 中的html 表单被加载到位于主索引文件的动态内容div 中。

<?php 
//FORM VALIDATION CHECKS
?>

<form action="" method="post">
<div class="form-field add-customer-form">
    <div class="container-fluid">
    <!-- Stack the columns on mobile by making one full-width and the other half-width -->
        <h4>Account Information</h4>
            <div class="row">
                <div class="col-md-6 label-container">
                    <div class="input-group input-group-icon">
                        <input type="text" placeholder="First Name" name="first-name" required/>
                        <div class="input-icon"><i class="fa fa-user"></i></div>
                        <div class="input-error-msg"><?php echo $first_name_err;?></div>
                    </div>
                </div>
            <div class="row">
                <div class=col-md-12 label-container">
                        <input type="submit" class="add-customer-form-btn submit-btn" value="Submit">
                </div>
            </div>
        </div>
</div>
</form>

标签： javascriptjqueryhtmlajaxforms