Jquery 不能 select 在表单内输入元素，但在表单外 select

Question

提交按钮的点击事件在其外部形式时触发，但当其内部形式时，jquery 根本不起作用！

jquery:

$(document).ready(function() {
$("#btn").click(function(){
    //do something
}); 
  });

这不起作用：

<form id="submitForm">
            <input type="email" name="email">
            <input id="btn" type="submit" value="submit">
    </form>

这有效！ :

<form id="submitForm">
            <input type="email" name="email">
</form>         
<input id="btn" type="submit" value="submit">

为什么会这样？我怎样才能让它发挥作用？

Answer 1

那是因为 type=submit 按钮或与此相关的输入，在表单中，触发 post 返回后端或服务器.

而这正是您的事件回调看似无效但实际上有效的原因。

使用下面的代码来阻止提交表单。

$('form').submit(function(e){
    e.preventDefault();
    // ajax stuff
});

Answer 2

您可以通过.submit

触发表单提交

$(document).ready(function() {
    $("#submitForm").submit(function(e){
       e.preventDefault();
       //do something
    }); 
});

你仍然可以在表单中使用它

<form id="submitForm">
     <input type="email" name="email"/>
     <input id="btn" type="submit" value="submit"/>
</form>

Answer 3

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

和

$("#btn").click(function(e){
          e.preventDefault();

都有效。（将 type="submit" 更改为 type="button" 没有）。

Jquery cannot select input element inside form but select when outside form