带有 spin.js 的 jQuery submit() 阻止表单提交？答案

【问题标题】：jQuery submit() with spin.js is preventing form from submitting?带有 spin.js 的 jQuery submit() 阻止表单提交？
【发布时间】：2016-08-06 23:33:56
【问题描述】：

我有一个可以正常提交的表单，但是当我添加 jQuery 代码以使用 spin.js 显示加载 div 时，一切都停止工作了。

<form id="search_form" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="POST">
<!-- Form inputs here -->
...
<input id="exam_search" type="submit" name="submit" value="Search" />

添加以下代码后，表单将停止提交，并且没有任何反应。加载 div 显示片刻，然后按预期消失，但似乎表单实际上不再提交。

var opts = // Array of options 
var spinner = null;
$("#search_form").submit(function() {
    spinner_div = document.getElementById('spinner');
    if(spinner == null) {
        spinner = new Spinner(opts).spin(spinner_div);
        $("#search_results, #query").css({"opacity": "0.75"});
        $("#search_form :input").attr("disabled", true);

    } else {
        spinner.spin(spinner_div);
        $("#search_results, #query").css({"opacity": "0.75"});
        $("#search_form :input").attr("disabled", true);
    }
});

如果我将提交事件中的所有代码更改为：

$("#search_form").submit(function() {
    alert ("form submitted");
});

它显示警报然后返回表单提交的结果就好了。

我在这里做错了什么？

编辑我在提交（）的 jQuery 文档中看到我不应该在输入字段上使用名称“提交”。我也尝试过更改，但没有成功。

【问题讨论】：

你能发布一个 jsfiddle 吗？我最好的猜测是你有一个错误正在停止你的代码
jsfiddle，或者sn-p，更方便。
我假设您通过 AJAX 提交表单，您也应该添加该部分代码。
嗯，我正在使用 Ajax 请求获取一些分页链接，但对于初始搜索，我使用的是普通表单，使用 php 提交给 self。不知道如何用小提琴重新创建它。

标签： javascript php jquery forms spin.js

【解决方案1】：

好吧，我不知道为什么，只是这样做很有效：

$("#search_form").submit(function() {
    var spinner_div = document.getElementById('spinner');
    var spinner = new Spinner(opts);
    spinner.spin(spinner_div);
});

【讨论】：