Javascript PreventDefault不阻止表单发送_Javascript_Jquery_Html

Javascript PreventDefault不阻止表单发送

javascript jquery html

Javascript PreventDefault不阻止表单发送,javascript,jquery,html,Javascript,Jquery,Html,我有一个非常简单的页面，其中有一个表单，我试图阻止使用jQuery发送该表单，但代码出人意料地不起作用。有什么想法吗 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script> $("#searchForm").

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


$（“#搜索表单”）。提交（功能（e）{
e、 预防默认值（）；
});

您的代码位于标题中，因此它在

存在之前执行。因此，选择器

#searchForm

不匹配任何内容。将脚本标记放在表单下方。

您需要将代码包装在

.ready（）

中，以便在DOM就绪时执行它

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

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

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

将事件侦听器包装到：

他们还可以使用

DOMContentLoaded

事件监听器，在页面完成加载之前不执行JavaScript，但不确定它在jQuery中是什么。但是在页面底部使用JavaScript更好，因为它不会阻止呈现。

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