令人惊讶的是，我在 jquery 101 代码中遗漏了一些东西。以下是代码
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
</script>
</head>
<body>
<form id="target" action="#">
<input type="text" value="Hello there">
<input type="submit" value="Go">
</form>
</body>
</html>
对应的plnkr链接是
最佳答案
当您的页面加载时，您的脚本(位于页面顶部)会在 #target 元素存在之前立即运行。因此，您的 .submit 不会被绑定(bind)。
有几个选项可以纠正这个问题。
最常见的(实际上也是最佳实践)是将函数包装在 document ready 中功能:
<script>
// This is the shorthand version of document ready
jQuery(function($) {
$( "#target" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
});
</script>
或者，您可以使用 event delegation ，它绑定(bind)到任何元素，甚至是那些在脚本运行后创建的元素。这在动态创建元素时特别有用，因为它还会绑定(bind)到这些元素:
<script>
$(document).on('submit', "#target", function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
</script>
关于javascript - jquery 101 表单提交不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24469346/