jquery - 如何可靠地拦截表单提交？

Question

我正在尝试拦截网页上特定表单的所有类型的表单提交。使用 jQuery 看起来非常简单:form.submit(function(e) {…})，如果我单击提交按钮，它就会完美地工作。

但是，选择字段上还有一个 onChange 属性，它会执行 this.form.submit() 操作，并且看起来此调用绕过了我的监听器(在 Chromium/Firefox 中):

<script type="text/javascript">
    function submitForm(e) {
        window.alert('submitted');
        e.preventDefault();
        return false;
    }

    $(document).ready(function() {
        $('#bar').submit(submitForm);
    });
</script>

<form id="bar">
    <select name="name" onChange="this.form.submit()">
        <option>Foo</option>
        <option>Bar</option>
    </select>
    <br/>
    <input type="submit"/>
</form>

显然，在上面的代码中，我可以将 this.form.submit() 更改为我的提交监听器的特定引用。然而，在我真正的应用程序中，事情并不是那么简单，因此我正在寻找不必修改 onChange 属性的方法。

如果我没有犯一个愚蠢的错误，但这实际上是预期的浏览器行为，如果您能解释事件流以及为什么这会导致上述症状，我将非常高兴。

Answer 1

调用 form.submit() 方法不会触发 submit 事件，就像例如设置文本框的值不会触发其change事件。尝试通过 jQuery 触发 submit 事件:

<form id="bar">
    <select name="name" onChange="$('#bar').submit();">
        <option>Foo</option>
        <option>Bar</option>
    </select>
    <br/>
    <input type="submit"/>
</form>

根据documentation ，将触发表单上的默认 submit 操作并提交表单。