简单的jquery不起作用[重复]答案

【问题标题】：simple jquery does not work [duplicate]简单的jquery不起作用[重复]
【发布时间】：2013-11-22 09:52:57
【问题描述】：

我是 JavaScript 和 jquery 的新手，想在提交之前检查表单中的字段。但即使是取自How to do something before on submit? 的简单示例也不起作用。我在 Firefox 中没有收到警报，也没有在 webdeveloper 的控制台中看到任何错误。见代码：

<html>
<head>

<script src="jquery.min.js"></script>
<script type="text/javascript">
$('#myForm').submit(function() {
  alert('Handler for .submit() called.');
  return false;
});
</script>
</head>

<body>


<form id="myForm" action="foo.php" method="get">
   <input type="text" value="" />
   <input type="submit" value="submit form" />
</form>



</body>
</html>

当然在同一个文件夹中还有“jquery.min.js”。

【问题讨论】：

确保将您的代码包装在document.ready事件中或在结束body标签之前添加脚本。
您需要一个DOM ready handler 来包装您的代码。有关这方面的更多信息，请参阅here。
我推荐阅读jQuery's documentation。上面写着：“要在文档准备好操作时立即运行代码，jQuery 有一个称为就绪事件的语句”.

标签： javascript jquery

【解决方案1】：

您需要在 dom 就绪处理程序中添加脚本

jQuery(function () {
    $('#myForm').submit(function () {
        alert('Handler for .submit() called.');
        return false;
    });
})

【讨论】：

【解决方案2】：

执行js代码时，html元素必须已经存在。要延迟代码策略，请使用document.ready，如上：

<script type="text/javascript">
$(document).ready(function(){
  $('#myForm').submit(function() {
    alert('Handler for .submit() called.');
    return false;
  });
});
</script>

注意：语法 $('#myForm').submit(function() { 已弃用，可能应替换为 $(document).on("submit", "#myForm", function() { 或类似内容:)

编辑： 对于您的要求，请参阅有关 e.preventDefault() 的 javascript 文档，这也可能对您想要的有用:)

【讨论】：

【解决方案3】：

这也可以，在元素已经添加到 DOM 之后设置脚本：

<html>

    <head>
        <script src="jquery.min.js"></script>
    </head>

    <body>
        <form id="myForm" action="foo.php" method="get">
            <input type="text" value="" />
            <input type="submit" value="submit form" />
        </form>
        <script type="text/javascript">
            $('#myForm').submit(function() {
                alert('Handler for .submit() called.');
                return false;
            });
        </script>
    </body>

【讨论】：

【解决方案4】：

你应该尝试e.preventDefault(); 而不是return false; 例如

$(function() { $('#myForm').submit(function(e) { e.preventDefault(); alert('Handler for .submit called.'); }); });

因为有时return false;可能对jquery上的某些代码无效

【讨论】：

【解决方案5】：

    <html>
    <head>
    <script src="jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#myForm').submit(function() {
      alert('Handler for .submit() called.');
      return false;
    });
    });
    </script>
    </head>
    <body>
    <form id="myForm" action="foo.php" method="get">
       <input type="text" value="" />
       <input type="submit" value="submit form" onsubmit="submit" />
    </form>
</body>
</html>

演示：http://jsfiddle.net/kapil_dev/6Tf7Y/

【讨论】：