javascript - 在普通 js 中提交表单不会触发 jquery 附加的事件

Question

我有这样的代码

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){

        $("#main_form").submit(function(){
            alert("submitting");
        });

        $("#main_form").on("submit", function(){
            alert("ON submitting");
        });


        $("#lnk").click(function(){
            //$("#main_form").submit(); //when submitting like this - event is triggered
            document.getElementById("main_form").submit();  //no submitting alerts are triggered
        });
    });
</script>

<h4><?php echo time(); ?></h4>

<form id="main_form" action="">
    <input type="text" value="x"/>
    <input type="submit" value="submit-btn"/>
</form>

<a id="lnk" href="#">test submit js</a>

当我点击提交按钮时，我有 2 个警报上升，所以 onsubmit 事件被触发但是当我点击链接#lnk 时，它必须从普通 js 中提交

 document.getElementById("main_form").submit();

我只收到表单提交但没有提醒。但是当我取消注释通过 jquery 提交时

$("#main_form").submit();

警报又回来了。谁能解释一下这是为什么？

附言我有以普通 js 提交表单的遗留代码，我不想更改它，所以我决定只绑定(bind) onsubmit 事件并在自定义函数中执行一些检查，但我遇到了如上所述的问题

Answer 1

当调用 submit() 方法时，浏览器不会触发元素的 onsubmit 事件。当您使用 jQuery().trigger("submit") 时，jQuery 会为您调用 native submit() 方法，但因为它没有“看到” native 事件并且 native submit() 不会触发 native onsubmit，它不会被调用。然而，这是一个浏览器怪癖，超出了 jQuery 的范围。