Question

这是一些非常简单的代码，我不确定它为什么不起作用。我直接从我的另一个HTML文件中复制它，它在那里工作但不在这个文件上。

以下是我所拥有的表单的HTML

<form>
    Email: <input type="text" name="email"><br><br>
    Password: <input type="password" name="password"><br><br>
    <input type="submit" value="Submit">
</form>

只是一个简单的电子邮件和密码表单。现在，我希望在点击提交时有一个警报。这是我从另一个HTML文件中编写和复制的jQuery，它的工作方式就像魅力一样但不在这里。

<script type="text/javascript">
    $("form").submit(function(event){
        alert( "String");
    });
</script>

我真的很困惑为什么它不起作用所以任何见解都会很棒。谢谢！

Answer 1

将您的脚本包装在document.ready

中

在文档准备好之前，页面无法安全操作。＆＃34; jQuery为您检测这种准备状态。 $( document ).ready()中包含的代码只有在页面文档对象模型（DOM）准备好执行JavaScript代码后才会运行。 $( window ).load(function() { ... })内包含的代码将在整个页面（图片或iframe）（而不仅仅是DOM）准备就绪后运行。

$(document).ready(function(){
    $("form").submit(function(event){
        alert( "String");
    });
});

<强>样本

＆＃13;

$(document).ready(function(){
    $("form").submit(function(event){
        alert( "String");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    Email: <input type="text" name="email"><br><br>
    Password: <input type="password" name="password"><br><br>
    <input type="submit" value="Submit">
</form>

＆＃13;

Answer 2

您应该将代码嵌入$（document）.ready（）它的作用是，它等待dom正确加载然后加载函数，以便我们在生命周期中拥有所有可用的函数

为此你可以阅读

W3schools Link for document.ready()

所以你的代码应该是

$document.ready(function(){
     $("form").submit(function(event){
        alert( "String");
    })
};

Answer 3

发生这种情况的原因是在加载文档之前调用javascript代码。如果您使用的是jquery，只需将javascript添加到$(function(){ ... })

即可

以下是示例1的小提琴：https://jsfiddle.net/swaprks/joqrfeor/

或者，如果您只想以其在其他文件中的工作方式使用它。将脚本标记粘贴到文件末尾。即在</body>标签之前

示例2：

<html>
  <head></head>
  <body>
     <form>
       Email: <input type="text" name="email"><br><br>
       Password: <input type="password" name="password"><br><br>
       <input type="submit" value="Submit">
     </form>

    <script type="text/javascript">
    $("form").submit(function(event){
        alert( "String");
    });
</script>
</body>
</html>

点击提交时发出警报

3 个答案: