【问题标题】:How to clear all form input fields when clicking on a bootstrap tab单击引导选项卡时如何清除所有表单输入字段
【发布时间】:2015-09-23 16:56:42
【问题描述】:

我有以下标签式导航:

<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('');
});

如何清除所有输入字段,包括单击当前选项卡/药丸时

【问题讨论】:

    标签: jquery twitter-bootstrap tabs


    【解决方案1】:

    将事件更改为“点击”

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

    【讨论】:

    • 如何刷新标签内容?我正在使用 jquery 可搜索插件 github.com/stidges/jquery-searchable 过滤表。但是当我使用上面的 jquery 事件将输入字段设置为空时,过滤后的内容似乎没有重新出现?
    • $('a[data-toggle="tab"]').on('click', function (e) { $('.form-group input[type="text"] ').val('').trigger("keyup"); });
    猜你喜欢
    • 2018-11-16
    • 1970-01-01
    • 2020-09-03
    • 1970-01-01
    • 2023-03-09
    • 2022-11-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多