Question

如下面的代码所示，点击 btnInner ，提醒“提交”，点击 btnOuter ，无警报。
然后，点击 btnInner ，提醒两次。

刷新。

首先点击 btnOuter n次，无警报，然后点击 btnInner ，提醒n + 1次。

我想知道为什么？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    function login() {
        $('#form1').submit(function () {
            alert('submit');
        });
        //alert("submit after");
    }
    </script>
</head>
<body>
    <form id="form1" action="login.html">
        <button id="btnInner" onclick="login()">inner submit</button>
    </form>
    <button id="btnOuter" onclick="login()">outer submit</button>
</body>
</html>

Answer 1

它没有显示警告，因为 btnOuter 中的login()功能仅附加＃form1 的提交事件，但功能在 btnInner 中不仅附加了一个事件，而且还触发了该事件，因为它位于表单内<button>元素。

如果您将login()函数放在表单内的<a>元素中，它只会附加事件并且不会触发任何提交事件，因为<a>与链接不提交表单操作相关联。

示例：

<form id="form1" action="#">
    <a href="#" onclick="login()">Attach event</a>
    <button id="btnInner">Trigger event</button>
</form>

当您点击＆＃34;附加事件＆＃34; 链接时，您将事件附加到表单，然后如果您点击＆＃34;触发事件＆＃34，则会显示警告; 按钮＆＃34;。实例：http://plnkr.co/edit/6r6TViWcxDOVhuiC6Va3?p=preview

Answer 2

您的JS代码处理事件＆＃34;提交＆＃34;

它应该触发你可以这样做的提交事件：

 function login() {
        $('#form1').submit();      

    }

你可以在这里处理提交：

$(document).ready(function(){
 $('#form1').submit(function () {
            alert('submit');
        });
});

从内部形式和外部形式提交表单之间的区别？

2 个答案: