Jquery 不能在表单内选择输入元素，但在表单外部选择输入元素

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

本文关键字：输入 元素 表单 选择 外部 不能 Jquery      更新时间：2023-09-26

当提交按钮的外部表单时，单击事件会触发，但是当其内部表单时，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">

为什么会这样？我怎样才能让它工作？

您可以通过.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>

这是因为表单内部的type=submit按钮或输入会触发回发到后端或服务器。

这正是您的事件回调看似不起作用的原因，而实际上却不起作用。

使用以下命令阻止提交表单。

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

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

和

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

两者都奏效了。（将类型="提交"更改为类型="按钮"没有）。

相关文章：