Javascript函数未触发答案

【问题标题】：Javascript function not triggeredJavascript函数未触发
【发布时间】：2011-07-18 10:33:42
【问题描述】：

在 JQuerys 的页面 (http://api.jquery.com/submit/) 上，我正在尝试他们的一个示例。它是纯粹的复制粘贴，但（除了 html、body 等）它仍然不起作用。有什么问题：

<body>
<html>
<head>
<script>

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

</script>

</head>

<form id="target" action="get_input_values.html">
  <input type="text" value="Hello there" />
  <input type="submit" value="Go" />
</form>
<div id="other">
  Trigger the handler
</div>

</body>
</html>

我只想有一个可以在我提交表单时触发的功能。下一步我需要从输入字段中获取值。

提前致谢！

【问题讨论】：

标签： javascript jquery html forms dom

【解决方案1】：

你还没有将你的脚本包装在一个

中

$(document).ready(function() {
    ...
});

block，所以当你的代码运行时找不到元素#target。

【讨论】：

...这是必要的，因为绑定 submit 处理程序的代码在绑定到的元素的定义之前。颠倒顺序（使<script> 在<form> 之后）也可以。

【解决方案2】：

在脚本运行时，DOM 中没有 ID 为 target 的元素。结果，零个元素附加了提交事件处理程序。

将脚本移动到文档的末尾（就在</body> 之前）

【讨论】：

【解决方案3】：

一旦表单加载到页面上，您需要将提交事件附加到表单。

为此，您可以将整个内容包装在 $(document).ready() 中：

$(document).ready(function(){
   $('#target').submit(function() {
      alert('Handler for .submit() called.');
      return false;
   });
});

这基本上是说一旦文档完成加载，就去找表单并附加一个提交事件。尝试以您的方式执行此操作可能会导致页面上的表单在您的 Javascript 尝试找到它时尚未加载。

这是您的代码的一个工作示例：http://jsfiddle.net/MmMa8/

【讨论】：

谢谢，这是问题的一部分。

【解决方案4】：

你加载了 jQuery 吗？

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

【讨论】：

当然，忘了那个。谢谢！另外，需要把函数放在.ready中。

【解决方案5】：

添加这个

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>

并将其包装在 document.ready 或如下所示

<script>
$(function(){
$('#target').submit(function() {
 alert('Handler for .submit() called.');
 return false;
});
});

</script>

【讨论】：

【解决方案6】：

尝试将<script>...</script> 放在最后。或者将submit 函数包装在ready() 函数上，例如：

$(document).ready(function(){
  $('#target').submit(function() {
    alert('Handler for .submit() called.');
    return false;
  });
});

这样submit将在整个页面加载完成后绑定到表单。

【讨论】：

【解决方案7】：

您的 HTML 是错误的。它应该被排序为：

<html>
<head>
</head>
<body>
</body>
</html>

但是你的 JavaScript 不能工作，因为你必须把它放进去

$(document).ready(function(){
//your code
});

另外你必须在开头包含 jQuery：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

【讨论】：