submitHandler 不适用于外部 js

Question

我必须处理 jsp 中未保存场景的更改。我有一个 jsp 表单和两个外部 js 文件。

1) 当我点击表单内的保存按钮时，工作正常。
2) 如果我有 alert.js 代码作为 JSP 的一部分作为内联脚本，工作正常。
3) 如果我外部化 alert.js 并将此 js 作为导入的一部分包含在内，它将进入 app.js 中的 submit_form() 函数。但是 submitHandler 没有被执行。

1) Jsp形式

I have form with inline js click event like below

    //submit form with validation
    $('button:submit').click(function() {
        submit_form('#name', '#siteId', '${add}', '${view}', 'Site');
    });


    <form:form id="form" action="${save}" commandName="site" cssClass="form-horizontal" data-toggle="validator">
        .
        .
        .
        .
        <button type="submit" class="btn btn-primary" disabled><spring:message code="form.button.site.save"/></button>
    </form:form>

app.js

function submit_form(name, page_id, $add_url, $view_url, page_name) {
    $form.validate({
        .
        .
        submitHandler: function(form) {
            .
            .
            $.post($form.attr('action'), $form.serialize(), function(response) {
            });
        }
    });

alert.js

$(document).ready(function() {
    //unsaved alert section
    var unsaved = false;

    $(document).on('change', ':input', ':select', function() { //triggers change in all input/select fields including text type
        unsaved = true;
    });

    $('a.form-done').click(function() {
        var $this = $(this);
        if(unsaved === true) {
            var $modal = $('#unsaveModal');
            $modal.find(".modal-title").text("Unsaved Changes");
            $modal.find(".modal-body span").html("Changes have not been saved. Do you want to save changes?");
            $modal.find('.modal-footer .btn-warning').attr('href', $this.attr('href'));
            $modal.modal('show');
            return false;
        } else {
            return;
        }
    });

    $('button:submit').click(function() {
        unsaved = false;
    });

    $('#unsaveModal .modal-footer .btn-primary').click(function() {
        $('button:submit').prop('disabled', true);
        $('#form').submit();
            $('#unsaveModal').modal('hide');
        });
    });

Answer 1

function submit_form(name, page_id, $add_url, $view_url, page_name) {
    $form.validate({
        ....
        submitHandler: function(form) {
            ....
        }
    });
    ....

.validate()方法仅用于初始化表单上的插件，不应放在click 处理程序，永远不会在 submit 处理程序中。该插件已经在捕获 click 并中断 submit 事件。将它放在 submit 处理程序中会破坏它，因为在调用插件初始化之前提交已经发生。

$(document).ready(function() {

    $form.validate({
        ....
        submitHandler: function(form) {
            // ajax here
            ....
        }
    });
    ....

submitHandler 不适用于外部 js

submitHandler is not working with external js

jquery

jsp

jquery-validate

form-submit