我有这个基本形式:

<form id="myForm" name="myForm" action="index.php" method="post">
    <input type="submit" value="Submit" />
</form>


然后我的jQuery附加提交事件:

$( document ).ready(function() {
    var frm = $('#myForm');
    frm.submit(function (ev) {
        ev.preventDefault();
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert('ok');
            }
        });
    });
});


当我按下“提交”按钮时,它工作正常,我收到“确定”的警报。

但是,如果我将Submit按钮更改为实际按钮,然后通过javascript添加onclick函数,如下所示:

<input type="button" value="Submit" onclick="submitF(this.form);" />


JS:

function submitF(form) {
    form.submit();
}


我的jQuery事件不会触发,该表单通常会提交。

如果我将jQuery函数附加到表单提交事件,为什么当JavaScript提交表单时它不会触发?

最佳答案

这样做是因为jQuery不会阻止javascript中的本机提交触发器。
这样做是为了防止表单提交,然后例如可以稍后以编程方式提交表单

$('form').on('submit', function(e) {
    e.preventDefault():
    // do stuff
    // then submit form

    this.submit(); // does not trigger this event handler but submits the form instead
});


如果要触发jQuery事件处理程序并阻止表单提交,请执行

function submitF(form) {
    $(form).submit();
}

10-05 20:44
查看更多