Question

在JQuerys的页面（http://api.jquery.com/submit/）上，我正在尝试他们的一个例子。这是纯复制粘贴，但（除了，HTML，正文等）仍然无法正常工作。有什么问题：

<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>

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

提前致谢！

Answer 1

您尚未将脚本包装在

中

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

阻止，因此运行代码时无法找到元素#target。

Answer 2

脚本运行时，DOM 中没有带有target标识的元素。因此，零元素附加了提交事件处理程序。

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

Answer 3

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

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

中

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

这基本上是说文档加载完成后，去查找表单并附上一个提交事件。尝试按照您的方式执行此操作会冒着Javascript尝试找到页面上的表单时无法加载的风险。

以下是您的代码的工作示例：http://jsfiddle.net/MmMa8/

Answer 4

你加载了jQuery吗？

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

Answer 5

你的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>

Answer 6

添加此

<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>

Answer 7

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

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

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

Javascript函数未触发

7 个答案: