单击 bootstrap 选项卡时如何清除所有表单输入字段

Question

我有以下标签式导航：

<div>

    <ul class="nav nav-pills" >
        <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
        <li><a href="#tasks" data-toggle="tab">Tasks</a></li>
        <li><a href="#messages" data-toggle="tab">Messages</a></li>
   </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="home">...</div>
    <div class="tab-pane" id="tasks">
        <div class="form-group">
             <input type="text" id="search1" value="" class="form-control input-lg">
        </div>
        ....
    </div>
    <div class="tab-pane" id="messages">
        <div class="form-group">
             <input type="text" id="search2" value="" class="form-control input-lg">
        </div>
        ....
    </div>
 </div>

我正在使用以下代码在单击药丸时清除所有输入字段。但是，当我单击当前药丸时，输入字段没有清除？例如，如果我在 tasks 窗格上并单击 tasks 药丸，则以下事件似乎不会触发以清除所有输入字段。只有当我循环使用不同的药丸时它们才会清除。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
   $('.form-group input[type="text"]').val('');
});

如何清除所有输入字段，包括单击当前 tab/pill

Answer 1

将事件更改为 "click"

$('a[data-toggle="tab"]').on('click', function (e) {
   $('.form-group input[type="text"]').val('');
});

单击 bootstrap 选项卡时如何清除所有表单输入字段

How to clear all form input fields when clicking on a bootstrap tab

jquery

tabs

twitter-bootstrap