PreventDefault不阻止表单发送

我有一个非常简单的页面，我试图阻止使用jQuery发送，但代码出乎意料地无法工作。有任何想法吗？PreventDefault不阻止表单发送

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

来源

2014-07-20 user3169790

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

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

来源

2014-07-20 06:29:25 martynas

你的代码是在头，因此执行<form>甚至存在了。因此，选择器#searchForm什么都不匹配。将脚本标记放置在表单下方。

来源

2014-07-20 06:26:26

他们还可以让自己的JavaScript无法执行，直到页面已经通过'DOMContentLoaded'事件侦听器加载完成后，不知道它是在jQuery中虽然。但是，页面底部的JavaScript更好，因为它不会阻止渲染。 – David

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

来源

2014-07-20 06:26:39 carter

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

裹事件侦听器jQuery's .ready() method：

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

来源

2014-07-20 06:32:47 jtheletter

PreventDefault不阻止表单发送

回答

相关问题