按钮在表单标签中的单击不起作用

Question

体标记

<div id="stage1">
    <form id="form1" method="post">
        <button id="sm1" type="submit" class="button" onclick="Result(msg);"><span>GO – SM1</span></button>
        <div id="sm2">GO – SM2</div>
    </form>
    <button id="sm3"type="submit" class="button" style="vertical-align:middle"> GO – SM3</button>
</div>
<div id="stage2" hidden="">
    HELLO WORLD
</div>

脚本标记

<script> 
    function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }    
    $(document).ready(function(){
        $("#sm1").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });
    });   
    $(document).ready(function(){
        $("#sm2").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });
    });   
    $(document).ready(function(){
        $("#sm3").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });
    });   
</script>

问题

当我点击GO - SM1按钮时，什么都不会发生。

但是，当我点击DIV标签GO - SM2区域时，stage1就消失了，stage2出现了。

此外，我还点击了另一个按钮外的形式标签GO - SM3，stage1消失，stage2也出现。

How

单击GO - SM1按钮，stage1消失，stage2出现，就像我单击GO - SM2和GO - SM3一样。

Answer 1

确定第一步，移除按一下“更改类型”按钮不提交。

<div id="stage1">
    <form id="form1" method="post">
        <button id="sm1" type="button" class="button"><span>GO – SM1</span></button>
        <div id="sm2">GO – SM2</div>
    </form>
    <button id="sm3"type="button" class="button" style="vertical-align:middle"> GO – SM3</button>
</div>
<div id="stage2" hidden="">
    HELLO WORLD
</div>

第二步把这件事弄清楚一点

<script> 
    function sleep (time) {
        return new Promise((resolve) => setTimeout(resolve, time));
    }    
    $(document).ready(function(){
        $("#sm1").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });

        $("#sm2").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });

        $("#sm3").click(function(){
            $("#stage1").fadeOut(600);
            sleep(700).then(() => {
                $("#stage2").fadeIn(600);
            });
        });

    });   

</script>

那会有帮助的。