jQuery - 表单不会使用 jQuery 提交

Question

进一步解决我的问题 - jQuery on submit validation, with modal dialog at the end?

似乎表单根本不会使用 jQuery 提交。这是我非常简化的代码：

<script type="text/javascript">

     $(document).ready(function(){
        $(document).click(function() {
            $('#inputform').submit();
        });

        $("#inputform").submit(function() {
            alert('test');
            return true;
        });
    });
</script>

<form method="POST" action="<?php echo CURRENT_PAGE ?>" id="inputform">

<button type="submit" name="submit" id="submit">Submit form</button>

</form>

单击正文会显示“测试”警报，但不会提交表单。另外，关闭提示框后，再次点击不会再次出现。

只需单击提交按钮本身就会显示警报，然后按预期提交表单。

很抱歉（我知道）一个非常愚蠢的问题，但我在这里不知所措。泰！

Answer 1

问题是您已将提交按钮命名为“提交”。将其更改为其他任何内容，它都会起作用。 （同时更改id，最好保持它们相同，尤其是因为some browser issues。）

为什么：表单元素有一个名为submit 的属性，您可以调用该函数来提交它们。 （当您在 jQuery 实例上调用 submit 时，jQuery 会在后台使用它。）但是表单元素也接收表单中每个字段的属性，使用字段的名称，所以如果你有一个名为“提交”的字段，它覆盖submit 函数，这意味着您不能以编程方式提交表单。

工作示例：Live copy | Live source

<script type="text/javascript">

     $(document).ready(function(){
        $(document).click(function() {
            $('#inputform').submit();
        });

        $("#inputform").submit(function() {
            alert('test');
            return true;
        });
    });
</script>

<form method="GET" action="http://jsbin.com/uwuzon" id="inputform">
<input type="text" name="foo" value="bar">
<button type="submit" name="someOtherName" id="someOtherName">Submit form</button>
</form>

（显着的变化是name="someOtherName" id="someOtherName" 部分。其他变化[更改表单的操作和方法] 只是使其适用于JSbin。）

旁注：您不必在 submit 事件处理程序中使用 return true; 来允许提交表单。你只需要不 return false;。 :-)