Question

我使用带有百里香和自行车4的弹簧靴2.

在一个页面上，我有很多标签（下面的代码只有网页来减少代码......），我设置了一个标签。

当显示标签但显示的事件未发生时...要发生，我需要转到另一个标签并返回...

<!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>

有遗漏的东西吗？

Answer 1

如果在第一次加载页面时没有错，那么没有事件被触发，所以ntg加载

您的此代码

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

第一次在选项卡上不会发生事件

1 个答案: