logo标签列表

阻止默认行为无法阻止表单提交

javascriptjqueryhtml
5

我有一个非常简单的页面，其中包含一个表单。我正在尝试使用jQuery阻止该表单的提交，但是代码却出现了意外的问题。有什么想法吗？

<!DOCTYPE html>
<html>
   <head>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script>

            $("#searchForm").submit(function(e){
               e.preventDefault();
         });

    </script>

</head>
<body>
    <form id="searchForm">
      <input name="q" placeholder="Go to a Website">
      <input type="submit" value="Search">
    </form>
    <pre id="response"></pre>
</body>

4个回答
5
您需要将代码放在.ready()中，以便在DOM准备就绪时执行。
$(document).ready(function() {
     $("#searchForm").submit(function(e){
         e.preventDefault();
     });
});
3

您的代码位于头部，因此在 <form> 存在之前就执行了。 因此，选择器 #searchForm 没有匹配到任何内容。请将脚本标签放置在表单下面。

2
他们还可以通过使用 DOMContentLoaded 事件监听器使其 JavaScript 在页面完成加载之前不执行，但不确定在 jQuery 中是什么。但是将 JavaScript 放在页面底部更好，因为它不会阻止渲染。 - David
2

在浏览器加载完页面之前，您需要延迟添加事件监听器函数。否则，这些JavaScript代码行将在表单元素存在之前执行，因此该函数不会附加到它上面。

请使用jQuery的.ready()方法来包装事件监听器：

$(document).ready(function() {
  $('#searchForm').submit(function(event) {
    event.preventDefault();
  });
});
0
$(document).on('submit', function(e){
    e.preventDefault();
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接