Question

令人惊讶的是我在jquery 101代码中遗漏了一些东西。 FOllowing是代码

<!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链接

http://plnkr.co/edit/lib2XGtHwJYVfiFKcK8n?p=preview

Answer 1

当您加载页面时，您的脚本（位于页面顶部）会立即运行，而#target元素存在之前。因此，.submit不受约束。

有几种方法可以纠正这个问题。

最常见的（也是最佳实践）是将函数包装在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，甚至是在脚本运行后创建的元素。这在动态创建元素时特别有用，因为它也将绑定到这些元素：

<script>
    $(document).on('submit', "#target", function( event ) {
      alert( "Handler for .submit() called." );
      event.preventDefault();
    });
</script>

Demo of event delegation

Answer 2

<强> JQuery的

 $(function () {
        $("#target").on("submit",null,function( event ) {
          alert("Handler for .submit() called.");
          event.preventDefault();
        });
    });

Answer 3

$(document).ready(function(){
    $( "#target" ).submit(function( event ) {
      alert( "Handler for .submit() called." );
      event.preventDefault();
    });
});

这将允许你的jquery在允许文件运行之前等待文档准备就绪（谢谢Caleb）

Answer 4

<script>
$(function(){
    $( "#target" ).submit(function( event ) {
      alert( "Handler for .submit() called." );
      event.preventDefault();
    });
)};
</script>

它们必须被声明为ready或load函数，因为jquery编译器将在加载文档时执行函数，而event.prevenDefault函数是阻止形成默认操作但上面的代码没有动作。 preventDefalut选项示例引用jqueryApI。

jquery 101表单提交不起作用

4 个答案: