Question

我有一个非常简单的页面，其中包含我试图阻止使用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>

Answer 1

您需要将代码包装在.ready()中，以便在DOM准备就绪时执行。

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

Answer 2

您的代码位于标题中，因此在<form>存在之前执行。因此，选择器#searchForm不匹配。将脚本标记放在表单下面。

Answer 3

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

在jQuery's .ready() method中包装事件监听器：

$(document).ready(function() {
  $('#searchForm').submit(function(event) {
    event.preventDefault();
  });
});

Answer 4

$(document).on('submit', function(e){
    e.preventDefault();
});

PreventDefault不阻止表单发送

4 个答案: