Javascript 事件不会第一次出现在选项卡上_Javascript_Bootstrap 4_Thymeleaf

Javascript 事件不会第一次出现在选项卡上

javascript bootstrap-4

Javascript 事件不会第一次出现在选项卡上,javascript,bootstrap-4,thymeleaf,Javascript,Bootstrap 4,Thymeleaf,我将spring boot 2与thymeleaf和bootstrap 4一起使用在一个页面上，我有许多选项卡（只有下面代码的网页，以减少代码…），我设置一个活动当显示选项卡但显示的事件不发生时。。。要实现这一点，我需要转到另一个选项卡并返回 <!DOCTYPE html> <html th:lang="${#locale.language}"> <head th:include="fragments/head :: HeadCss"/>

我将spring boot 2与thymeleaf和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>





...



...
$（文档）.ready（函数（）{
$（“a[href='#productTypesTabs']”）on（'show.bs.tab'，函数（e）{
var url='/template/producttypes'；
$（“#productTypesFragment”）.load（url）；
});
});

是否缺少某些内容？

如果我在第一次加载页面时没有出错，则不会触发任何事件，因此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
});