在引导选项卡上重置表单字段集中的文本字段 [英] Reset text fields in form fieldset on bootstrap tab press

问题描述

此问题与此有关.

HTML代码:

<ul class="nav nav-tabs">
    <li class="active"><a href="#a" data-toggle="tab">A</a>
    </li>
    <li><a href="#b" data-toggle="tab">B</a>
    </li>
</ul>
<div class="tab-content">
    <div class="tab-pane active" id="a">
        <form id="form1" class="form">
            <fieldset id="abc">
                <input type="text" name="a">
                <input type="text" name="b">
            </fieldset>
            <fieldset id="xyz">
                <input type="text" name="x">
                <input type="text" name="y">
                <input type="text" name="z">
            </fieldset>
        </form>
    </div>
    <div class="tab-pane" id="b"></div>
</div>

JavaScript代码:

Javascript code:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
               $("#xyz > input").val("");
            });

即使在按下按钮时也能执行类似操作，这也不起作用.

This does not work even though something similar does work on button press..

演示

衷心感谢您的帮助

谢谢

推荐答案

在DOM准备就绪后，您需要注册shown.bs.tab事件处理程序:

You need to register the shown.bs.tab event handler once the DOM is ready:

$(function () {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $("#xyz > input").val("");
  });      
});

否则，on试图将处理程序绑定到一个空元素列表.

Otherwise the on is trying to bind a handler to an empty list of elements.

演示

这篇关于在引导选项卡上重置表单字段集中的文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！