javascript - Bootstrap 选项卡通过在 jquery 中使用表单 id 提交多个表单

Question

我正在为表单使用 Bootstrap 选项卡。每个选项卡都有表单 ID。我想使用表单 ID 提交表单。我的表单提交工作正常。当我点击选项卡 5 次时，它会向服务器发送数据 5 次。那是我的问题。在加载文档期间也没有提交第一个选项卡表单
我的 html 代码附在下面: 这是我的代码: http://www.bootply.com/asHAcXeSby

HTML:

<ul class="nav nav-tabs ">
  <li class="active"><a href="#academic" data-toggle="tab" aria-expanded="true"> ABC</a></li>
  <li class=""><a href="#extra" data-toggle="tab" aria-expanded="false"> DEF</a></li>
</ul>
<div class="tab-content">
  <div id="academic" class="tab-pane fade active in">
    <form role="form" method="post" action="" id="academic_dtls">
      <input name="xyz" type="text">
      <input name="submit" value="Save" type="submit">
    </form>
  </div>
  <div id="extra" class="tab-pane">
    <form role="form" method="post" action="" id="extra_dtls">
      <input name="mnz" type="text">
      <input name="submit" value="Save" type="submit">
    </form>
  </div>
</div>

JS:

 $(document).ready(function(){

  var activeTab = null;
  $('a[data-toggle="tab"]').on('show.bs.tab', function (event) {
    activeTab = $(event.target).attr("href");
    submit_form();
  });
  function submit_form(){
    $('form').submit(function(e){
      e.preventDefault();
      //alert($(this).attr('id'));
      var data = $(this).serialize();
      console.log(data); 
  });
  }
});

Answer 1

检查这个:http://www.bootply.com/fCNm9iQ7t1 您犯的错误是每次显示选项卡时都绑定(bind)了提交事件

$(document).ready(function(){

   var activeTab = null;
   $('a[data-toggle="tab"]').on('show.bs.tab', function (event) {
     activeTab = $(event.target).attr("href");
   });
  $('form').submit(function(e){
      var data = $(this).serialize();
      console.log(data); 
  });

});