Question

所以我在这里读到：https://api.jquery.com/submit/我可以做到这一点

$("#validationForm").submit(function(event) {
    event.preventDefault(); 
    alert('test');
});

以防止在单击提交按钮时提交表单。然而，无论出于何种原因，它都无法正常工作，我不知道为什么。我试图删除除了两个输入之外的所有内容并尝试按下提交按钮，但它仍然没有提醒我。有谁知道如何解决这个问题？这是我的其余代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="jQuery.min.js"></script>
<script type="text/javascript">

$("#validationForm").submit(function(event) {
    event.preventDefault(); 
    alert('test');
});

</script>

<body>   
    <div>
        <h1 id="header" align="center">    </h1>
    </div>
    <div id="wrapper1">
        <div>
            <a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">About Website</a>
            <h1 class="infoText" style="display:none">Text</h1>
        </div>
        <div>
            <a class="info" id="hvr-float" href="javascript:void(0);">Dear Friends</a>
            <h1 class="infoText" style="display:none">Text</h1>
        </div>
        <div>
            <a class="info" id="hvr-float" href="javascript:void(0);">Dear Reader</a>
            <h1 class="infoText" style="display:none">Text</h1>
        </div>
        <div>
            <a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">The People</a>
            <h1 class="infoText" style="display:none"></h1>
        </div>
        <div>
            <a class="info" id="hvr-float" p style="font-size:30px" href="javascript:void(0);">Sign Up</a>
            <div id="wrapper2" style="display:none">
                <form id="validationForm">
                    <input class="infoPlaceholder" name="firstName" placeholder="First Name"/>
                    <input class="infoPlaceholder" name="lastName" id="addRightMargin" placeholder="Last Name"/>
                    <input class="infoPlaceholder" name="email" placeholder="Email"/>
                    <input class="infoPlaceholder" name="city" placeholder="City"/>
                    <input class="infoPlaceholder" name="state" placeholder="State"/>

                    <p></p>
                    <div id="wrapper3">
                         <div style="float:left" id="hvr-float">
                            <a class="supportWhoText" id="elderlyButton" href="javascript:void(0);">Elderly</a>
                            <div class="eacQuestion" id="elderlyText" style="display:none">How many elderly?</div>
                            <div>
                                <input class="countBoxes" id="elderlyBox" style="display:none" name="elderlyCount" placeholder="#"/>
                            </div>
                        </div>
                        <div style="float:left" id="hvr-float">
                            <a class="supportWhoText" id="adultButton" href="javascript:void(0);">Adults</a>
                            <div class="eacQuestion"id="adultText" style="display:none">How many adults?</div>
                            <div>
                                <input class="countBoxes" id="adultBox" style="display:none" name="adultsCount" placeholder="#"/>
                            </div>
                        </div>
                        <div style="float:left" id="hvr-float">
                            <a class="supportWhoText" id="childrenButton" href="javascript:void(0);">Children</a> 
                            <div class="eacQuestion" id="childrenText" style="display:none">How many children?</div>
                            <div>
                                <input class="countBoxes" id="childrenBox" style="display:none" name="childrenCount" placeholder="#"/>
                            </div>
                        </div>
                    </div>
                    <div style="float:left">
                        <textarea class="comments" name='comment' id='comment' placeholder="Comments"></textarea>
                    </div>
                    <div style="float:right" id="hvr-float">
                        <input type="submit" id="submitButton"  value="Submit" />
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>

我知道我的代码就像超级讨厌...这是我建立的第一个网站。请帮忙！我迷路了！

Answer 1

将您的代码放在 $( document ).ready() 处理程序

中

$(document).ready(function(){
    $("#validationForm").submit(function(event) {
        event.preventDefault(); 
        alert('test');
    });
});

在文档准备好之前，页面无法安全操作。＆＃34; jQuery为您检测这种准备状态。包含在$（document）.ready（）中的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码后才会运行。包含在$（window）.load（function（）{...}）中的代码将在整个页面（图像或iframe）（而不仅仅是DOM）准备好后运行。（摘自：https://learn.jquery.com/using-jquery-core/document-ready/）

Answer 2

从代码中可以看出代码位于head元素中。因此，当页面加载时，当表单尚未在 DOM 中可用时执行脚本。要等待DOM完成加载，您可以使用ready。

因此，您需要使用ready

$(document).ready(function () {
    $("#validationForm").submit(function (event) {
        event.preventDefault();
        alert('test');
    });
});

或者，您也可以在body 末尾移动脚本。

表单提交预防不起作用

2 个答案: