jquery - Bootstrap 选项卡抛出 data[option] is not a function 错误

Question

我有几个 Bootstrap 选项卡，每个选项卡都包含一个表单，我放置了一个带有 cancel_preset 类的“取消”按钮，并且我有这个功能:

$(".cancel_preset").on("click", function(){
    var _tab=$(this).closest(".tab-pane").attr("id"); //prints the correct id for every tab
    $("a[href='#"+_tab+"']").tab('hide');
});

但它给了我这个错误line: tab.js:124 Uncaught TypeError: data[option] is not a function

HTML:

<ul class="dropdown-menu">
    <h4>Select preset:</h4>
    <li><a href="#create_preset_intro" class="preset_tab_toggle" data-toggle="tab" data-title="Intro preset (new)" id="preset_intro">Intro</a></li>
    <li><a href="#create_preset_normal" class="preset_tab_toggle" data-toggle="tab" data-title="Normal preset (new)" id="preset_normal">Normal</a></li>
    <li><a href="#create_preset_proprietary" class="preset_tab_toggle" data-toggle="tab" data-title="Proprietary preset (new)" id="preset_proprietary">Proprietary</a></li>
</ul>

<div class="tab-content" id="preset-content">
    <div class="tab-pane preset-containor" id="create_preset_intro">
        <form class="preset" id="f_preset_intro">
            <!-- some form inputs -->
            <div class="clearer"></div>
            <div class="pull-right">
              <button type="button" class="btn btn-default cancel_preset">Cancel</button>
              <button type="submit" class="btn btn-success submit_preset">Create</button>
            </div>
            <div class="clearer"></div>
        </form>
    </div>
    <div class="tab-pane preset-containor" id="create_preset_normal">
        <form class="preset" id="f_preset_normal">
            <!-- some form inputs -->
            <div class="clearer"></div>
            <div class="pull-right">
              <button type="button" class="btn btn-default cancel_preset">Cancel</button>
              <button type="submit" class="btn btn-success submit_preset">Create</button>
            </div>
            <div class="clearer"></div>
        </form>
    </div>
    <div class="tab-pane preset-containor" id="create_preset_proprietary">
        <form class="preset" id="f_preset_proprietary">
            <!-- some form inputs -->
            <div class="clearer"></div>
            <div class="pull-right">
              <button type="button" class="btn btn-default cancel_preset">Cancel</button>
              <button type="submit" class="btn btn-success submit_preset">Create</button>
            </div>
            <div class="clearer"></div>
        </form>
    </div>
</div>

从我对有关此主题的其他问题的看法来看，大多数人都说票据不兼容 这些是我包含的脚本(bootstrap.js 由 laravel 包含):

    <script src="/test2/public/js/jquery-3.1.1.min.js"></script>
    <script src="/test2/public/js/less.min.js"></script>
    <script src="/test2/public/js/alert.js"></script>
    <script src="/test2/public/js/button.js"></script>
    <script src="/test2/public/js/carousel.js"></script>
    <script src="/test2/public/js/collapse.js"></script>
    <script src="/test2/public/js/dropdown.js"></script>
    <script src="/test2/public/js/modal.js"></script>
    <script src="/test2/public/js/scrollspy.js"></script>
    <script src="/test2/public/js/tab.js"></script>
    <script src="/test2/public/js/popover.js"></script>
    <script src="/test2/public/js/affix.js"></script>
    <script src="/test2/public/js/transition.js"></script>
    <script src="/test2/public/js/jquery-ui.min.js"></script>

Answer 1

试试这个: 使用 jQuery

$(".cancel_preset").on("click", function(){
    var _tab=$(this).closest(".tab-pane").attr("id");
    $("a[href='#"+_tab+"']").parent().hide();
    $("#"+_tab).hide();
});