为什么 jQuery 的 .submit() 不起作用？

Question

我正在创建一个在提交时触发$.ajax() 的表单。但是，无论出于何种原因，.on("submit", function(){}) 或 .submit() 都不会响应表单提交。为什么 jQuery 的提交功能或事件不起作用？我是否忽略了什么？

这是我的代码：

jQuery(function($) {

    // show/hide the $modal.
    var $modal = $(".modal"),
        $modalBody = $modal.find(".modal-body"),
        $formFinish = $(".modal-finished"),
        $button = $("#openModal");

    // Get the form.
    var $form = $("#ajax-contact"),
        formData = $form.serialize();

    $button.on("click", function() {
        $modal.fadeIn("600");
    });

    $modal.on("click", "#closeModal", function() {
        $modal.fadeOut("600");
    });

    // Get the messages div.
    var $formMessages = $("#form-messages");

    $form.submit(function(event) {
        event.preventDefault();

        // Submit the form using AJAX.
        var $submitForm = $.ajax({
            type: "post",
            url: wp_urls.ajax_url,
            data: {
                action: submit_form,
                form: formData
            }
        });

        $submitForm.done(function(response) {
            alert("Succeed!");
            $modalBody.hide();
            $formFinish.show();
        }).fail(function(response) {
            alert("Fail!");
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
    <div class="modal-header">
        <button type="button" class="close" id="closeModal">×</button>
        <h3>Request Pricing Information</h3>
    </div>
    <form class="modal-body form-horizontal" id="ajax-contact">
        <fieldset>
            <div class="control-group">
                <label class="control-label">First and Last Name</label>
                <div class="controls">
                    <input type="text" name="name" required="">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Email</label>
                <div class="controls">
                    <input type="email" name="email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Phone</label>
                <div class="controls">
                    <input type="tel" name="tel">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">City</label>
                <div class="controls">
                    <input type="text" name="city">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">State</label>
                <div class="controls">
                    <select name="state">
                        <option value="" disabled="" class="">Select your state</option>
                        <option value="0">Alabama</option>
                        <option value="1">Alaska</option>
                        <option value="2">Arizona</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">How did you hear about us?</label>
                <div class="controls">
                    <textarea placeholder="Let us know the article, website, event, or person that led you here." name="messag"></textarea>
                </div>
            </div>
        </fieldset>
    </form>

    <!-- Finished! -->
    <div class="modal-body text-center pricingSubmitted">
        <h4>Thank you. We will contact you shortly.</h4>
    </div>
    <div class="modal-footer">
        <a class="btn" id="closeModal">Close</a>
        <button class="btn btn-success" type="submit" value="Submit"><span>Send<span class="pricingSending">ing</span> <i class="icon-refresh icon-spin pricingSending"></i></span></button>
    </div>
</div>

Answer 1

您的提交按钮不在表单内，因此不会触发表单提交事件

改变结构，让表单包裹模态的所有内部元素。然后页脚和按钮将在表单内

<div class="modal">
   <form>
      <div class="modal-header"/>
      <div class="modal-body"/>
      <div class="modal-footer"/>  <!-- contains button -->
   </form>
</div>  

Answer 2

只需将<button> 放在表单中即可。如果你把它放在表单之外，它不会注册为提交表单；它只会注册为单击常规<button>：

jQuery(function($) {

    // show/hide the $modal.
    var $modal = $(".modal"),
        $modalBody = $modal.find(".modal-body"),
        $formFinish = $(".modal-finished"),
        $button = $("#openModal");

    // Get the form.
    var $form = $("#ajax-contact"),
        formData = $form.serialize();

    $button.on("click", function() {
        $modal.fadeIn("600");
    });

    $modal.on("click", "#closeModal", function() {
        $modal.fadeOut("600");
    });

    // Get the messages div.
    var $formMessages = $("#form-messages");

    $form.submit(function(event) {
        event.preventDefault();
        //This works now, so you'll get the following message in your console:
        console.log("Hi! I'm working now!");
        
        // Submit the form using AJAX.
        var $submitForm = $.ajax({
            type: "post",
            url: wp_urls.ajax_url,
            data: {
                action: submit_form,
                form: formData
            }
        });

        $submitForm.done(function(response) {
            alert("Succeed!");
            $modalBody.hide();
            $formFinish.show();
        }).fail(function(response) {
            alert("Fail!");
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal">
    <div class="modal-header">
        <button type="button" class="close" id="closeModal">×</button>
        <h3>Request Pricing Information</h3>
    </div>
    <form class="modal-body form-horizontal" id="ajax-contact">
        <fieldset>
            <div class="control-group">
                <label class="control-label">First and Last Name</label>
                <div class="controls">
                    <input type="text" name="name" required="">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Email</label>
                <div class="controls">
                    <input type="email" name="email">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">Phone</label>
                <div class="controls">
                    <input type="tel" name="tel">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">City</label>
                <div class="controls">
                    <input type="text" name="city">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">State</label>
                <div class="controls">
                    <select name="state">
                        <option value="" disabled="" class="">Select your state</option>
                        <option value="0">Alabama</option>
                        <option value="1">Alaska</option>
                        <option value="2">Arizona</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">How did you hear about us?</label>
                <div class="controls">
                    <textarea placeholder="Let us know the article, website, event, or person that led you here." name="messag"></textarea>
                </div>
            </div>
        </fieldset>
      
        <!-- Finished! -->
        <div class="modal-body text-center pricingSubmitted">
            <h4>Thank you. We will contact you shortly.</h4>
        </div>
        <div class="modal-footer">
            <a class="btn" id="closeModal">Close</a>
            <button class="btn btn-success" type="submit" value="Submit"><span>Send<span class="pricingSending">ing</span> <i class="icon-refresh icon-spin pricingSending"></i></span></button>
        </div>
    </form>
</div>

Answer 3

如果您想将按钮保留在 HTML 表单之外，您可以在按钮上使用 .click() 并在 click 函数中执行 AJAX 调用。

例子：

$('.btn-success').click(function() { your AJAX call here });