个人中心
gpt4 book ai didi

javascript - 第一次事件未在选项卡上发生

转载 作者：行者123 更新时间：2023-12-03 02:10:27 26 4
gpt4 key购买 nike

我使用 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>

是不是少了什么东西？

最佳答案

如果我没记错的话，当页面第一次加载时，没有触发任何事件，所以 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
});

关于javascript - 第一次事件未在选项卡上发生，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49598513/

26 4 0
文章推荐： javascript - 将响应映射到模型对象
文章推荐： c# - SharpDX:循环播放多个wav文件
文章推荐： geolocation - 为什么我的ElasticSearch查询没有获取位于地理边界框内的文档？
文章推荐： javascript - 如何获取输入类型的动态ID？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com