Javascript 使用引导样式后，提交帖子表单不再有效

背景：

我正在为我的网站使用NodeJS、Express、MailTransport和Bootstrap，创建一个联系人表单来向我发送个人电子邮件

我已经创建了一个route/sayhi来处理mailtransport sendMail方法并重定向回它/之后

然后我使用一个经典的html表单：

<form action="/sayhi" method="post" name="sendMail" id="sendMail">

编辑#2问题出现在我的overlay类中，当我将表单从它上取下时，它工作正常，但我不确定是什么导致了这种行为

CSS:

---

编辑#3问题似乎在于我的表单嵌套在另一个div中，事件中没有CSS，只是它是由一个按钮触发的，但仍然不知道为什么它会这样

您在评论中提供的额外信息表明您正在做：

$(".overlay").click(function(){ 
    $(this).fadeOut("fast"); 
}).children().click(function(e) { 
    return false;
});

---

因此，任何单击

.overlay

（包括您的按钮）中的任何元素都不会起任何作用，因为您正在拦截它并返回false。

以何种方式？注意，您的提交值已从

Send

更改为

AMA

，请检查是否有更改。您是否确定表单未发送？你在节点端调试过这个吗？与中一样，

console.log（“POST for/sayhi”）就在处理程序的开头？表单提交对我来说很好：我编辑了我的帖子，问题是我的表单所在的覆盖区（我用按钮切换）有一个问题，你怎么知道它不工作？
display:none？你怎么能看到表格？正如@Ibu所说，当你点击submit时，会发生什么呢？谢谢，我已经得出了这个结论，我现在正试图解决这个问题：如果点击了
.overlay
div，我想隐藏它，但如果
.overlay
的子对象是，除了我的
\submit
按钮。如果有帮助的话，请告诉我。我试图将.not（）选择器与children（）链接起来，但不明白为什么它不能与
$（“.overlay”）。单击（function（）{$（this.fadeOut（“fast”）；}）$（“#email_form”）。单击（函数（事件）{event.stopPropagation（）；}）已解决，但仍然不知道.not（）为什么不起作用。您可以尝试我上面链接的答案，或者，当您使用引导时，您可以使用它来处理所有这些。
<form action="/sayhi" method="post" name="sendMail" id="sendMail">
  <div class="form-group">
    <label for="InputName">Name</label>
    <input type="text" name="from" id="InputName" aria-describedby="emailHelp" placeholder="John Appleseed" form="sendMail" class="form-control"/>
    <small id="nameHelp" class="form-text text-muted">How do you define yourself ?</small>
  </div>
  <div class="form-group">
    <label for="InputEmail">Email address</label>
    <input type="email" name="mail" id="InputEmail" aria-describedby="emailHelp" placeholder="you@yourdomain.com" form="sendMail" class="form-control"/>
    <small id="emailHelp" class="form-text text-muted">To contact you back !</small>
  </div>
  <div class="form-group">
    <label for="Textarea">Something to tell me ?</label>
    <textarea name="text" id="Textarea" rows="3" placeholder="blah" form="sendMail" class="form-control"></textarea>
    <small id="textHelp" class="form-text text-muted">It can be anything, really!</small>
  </div>
  <button value="Send" id="submit" type="submit" class="btn btn-primary">Submit</button>
</form>

div.overlay
  div#email_form
    form(action="/sayhi" method="post" name="sendMail" id="sendMail")
      div(class="form-group")
          label.lettersB(for="InputName") Name
          input(type="text" name="from" class="form-control" id="InputName" aria-describedby="emailHelp" placeholder="John Appleseed" form="sendMail")
          small(id="nameHelp" class="form-text text-muted") How do you define yourself ?
      div(class="form-group")
          label.lettersB(for="InputEmail") Email address
          input(type="email" name="mail" class="form-control" id="InputEmail" aria-describedby="emailHelp" placeholder="you@yourdomain.com" form="sendMail")
          small(id="emailHelp" class="form-text text-muted") To contact you back !
      div(class="form-group")
          label.lettersB(for="Textarea") Something to tell me ?
          textarea(class="form-control" name="text" id="Textarea" rows="3" placeholder="Don't let The Blank Page Syndrome Hit!" form="sendMail")
          small(id="textHelp" class="form-text text-muted") It can be anything, really!
      button(value="Send" class="btn btn-primary" id="submit" type="submit") Submit

.overlay {
    display: none;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:rgba(0, 0, 0, 0.85);
    background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent\9;
    z-index:9999;
    color: white;
}
.overlay:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

$(".overlay").click(function(){ 
    $(this).fadeOut("fast"); 
}).children().click(function(e) { 
    return false;
});