事件第一次不会在标签上发生

我将弹簧靴2与胸腺和bootstrap 4一起使用。

在页面上，我有许多选项卡(仅用于下面的代码来减少代码...(，我设置一个活动。

显示选项卡时，但显示的事件不会发生...发生...我需要转到另一个选项卡并回来...

<!DOCTYPE html>
<html th:lang="${#locale.language}">
    <head th:include="fragments/head :: HeadCss"/>
    <body>
        <div class="container-fluid h-100">
            <div class="row h-100">
                <div class="col-lg-2 my-auto">
                    <div th:replace="fragments/left-menu :: LeftMenu('configurations')"></div>
                </div>
                <div id="main" class="col-lg-10 main">
                    <ul class="nav nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" role="tab" href="#productTypesTabs" th:text="#{productTypes}">Product Types</a>
                        </li>
                        ...
                    </ul>

                    <div class="tab-content">
                        <div id="productTypesTabs" role="tabpanel" class="tab-pane fade show active"><br>
                            <div id="productTypesFragment"></div>
                        </div>   
                        ...
                    </div> 
            </div>
        </div>
        <div th:replace="fragments/scripts :: Scripts"></div>
        <script type="text/javascript">
            $(document).ready(function () {
                $("a[href='#productTypesTabs']").on('shown.bs.tab', function (e) {
                    var url = '/template/producttypes';
                    $("#productTypesFragment").load(url);
                });
            });
        </script>
    </body>
</html>

是否缺少某物？

如果第一次加载页面时没有错，则没有事件发射，因此ntg loads

您的此代码

  $("a[href='#productTypesTabs']").on('shown.bs.tab', function (e) {
        var url = '/template/producttypes';
        $("#productTypesFragment").load(url);
    });

不应该像这个

function loadData(){
    var url = '/template/producttypes';
    $("#productTypesFragment").load(url);
}
$(document).ready(function () {
    $("a[href='#productTypesTabs']").on('shown.bs.tab', function (e) {
        loadData();
    });

    loadData();   // loads when page is loaded first time
});

相关内容

最新更新

热门标签：