个人中心
gpt4 book ai didi

bootstrap-4 - shown.bs.tab事件未在 Electron 应用程序中触发

转载 作者：行者123 更新时间：2023-12-03 12:22:58 25 4
gpt4 key购买 nike

在尝试实现datatables.net header 大小问题(在隐藏选项卡中创建 header 时， header 的大小未定)的修复程序时，我发现从 Electron 内部运行页面时从未调用过事件监听器函数(2.0.9)。当我在浏览器中运行相同的html页面时，事件监听器将运行。我正在使用Bootstrap v4.0.0和datatables.net-bs4 npm软件包(版本1.10.19)。

这是适用的html页面:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <script src="../vendor/jquery/jquery.js"></script>
        <script src="../vendor/jquery/jquery.js"></script>

        <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script> -->
        <script src="../vendor/bootstrap/js/bootstrap.js"></script>
        <script src="../vendor/datatables/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
        <script src="../vendor/datatables/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
        <script src="../vendor/datatables/Plugins/Scroller-1.5.0/js/dataTables.scroller.js"></script>
        <!-- <script src="../vendor/bootstrap/js/bootstrap.min.js"></script> -->
        <!-- <script src="../vendor/datatables/Plugins-master/pagination/full_numbers_no_ellipses.js"></script> -->

        <link rel="stylesheet" href="../vendor/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="../vendor/datatables/DataTables-1.10.18/css/dataTables.bootstrap.min.css">
        <link rel="stylesheet" href="../assets/css/add_edit_group_window.css">
        <link rel="stylesheet" href="../vendor/datatables/DataTables-1.10.18/css/jquery.dataTables.css">
        <link rel="stylesheet" href="../vendor/datatables/Plugins/Scroller-1.5.0/css/scroller.bootstrap.css">

        <!-- Icon Library-->
        <link rel="stylesheet" href="../vendor/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../vendor/datatables/DataTables-1.10.18/css/jquery.dataTables.css">
    </head>
    <body>
        <br>
            <div class="container card main">
                <br>
                <!-- Nav tabs -->
                <ul class="nav nav-tabs nav-pills" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" data-toggle="tab" role="tab" id="tab-1" href="#tab-1-settings">Tab1 Settings</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-tab-settings" data-toggle="tab" role="tab" id="tab-2" href="#tab-2-settings">Tab2 Settings</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-tab-settings" data-toggle="tab" role="tab" id="tab-3" href="#tab-3-settings">Tab3 Settings</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link nav-tab-settings" data-toggle="tab" role="tab" href="#tab-4-settings">Tab4 Settings</a>
                    </li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">

                    <!-- tab-1 Settings -->
                    <div id="tab-1-settings" class="container-fluid tab-pane active"><br>
                        <br>
                        stuff
                    </div>

                    <!-- tab-2 settings -->
                    <div id="tab-2-settings" class="container-fluid tab-pane fade table-responsive"><br>
                        <table class="table table-bordered table-hover table-condensed" id="tab2Tbl" cellspacing="0">
                            <thead>
                                <tr>
                                    <th>Table2</th>
                                    <th>Col2</th>
                                    <th>Col3</th>
                                </tr>
                            </thead>
                            <tbody id="tab-2-body-tab">
                            </tbody>
                        </table>
                    </div>

                    <!-- tab-3 settings -->
                    <div id="tab-3-settings" class="container tab-pane fade  table-responsive"><br>
                        <table class="table table-bordered table-hover table-condensed" id="tab3Tbl" cellspacing="0">
                            <thead>
                                <tr>
                                    <th scope="col">Table3</th>
                                    <th scope="col">Col2</th>
                                    <th scope="col">Col3</th>
                                    <th scope="col">Col4/th>
                                    <th scope="col">Col5</th>
                                </tr>
                            </thead>
                            <tbody id="tab-3-body-tab">
                            </tbody>
                        </table>
                    </div>

                    <!-- tab-4-settings -->
                    <div id="tab-4-settings" class="container tab-pane fade"><br>
                        <h3>tab-4-settings</h3>
                    </div>

                </div>
            </div>

            <div class="container card" style="text-align: right;">
                <br>
                <p><button class="btn" id="submitButton" type="button" disabled data-toggle="tooltip">Add New</button>
                <button class="btn" id="cancelButton" type="button">Cancel</button></p>
            </div>
    </body>
    <script src="page.js"></script>

    <script type="text/javascript" class="init">

$(document).ready(function() {
    console.log("setting up event for bootstrap");
    console.log(navigator.appName);

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        console.log('show - after the new tab has been shown');
    });
    $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
        console.log('show - before the new tab has been shown');
    });
});

</script>

此外，我还在$(document).ready函数中放入了另一个事件监听器， 

$('#tab-2').click(function (e) {
    console.log("clicking tab-2");
    e.preventDefault();
    // $(this).tab('show');
    console.log($(this));
    console.log($(this).tab);
    console.log($($.fn.dataTable.tables( true ) ));
    $('.table').css('width', '100%');
    $('.dataTables_scrollHeadInner').css('width', '100%');
    let x = $('#tab-2').find("th");

    console.log(x[0]);
    console.log($(x[0]));
    console.log($(x[0]).css("width"));
    console.log($($.fn.dataTable.tables( true ) ));
    console.log($($.fn.dataTable.tables( true ) ).DataTable());

});

当我单击选项卡时，将调用此函数，并且除了fn.dataTable日志行以外的所有值都存在。 fn.dataTable.tables的console.log显示一个空数组，一个_Api对象似乎没有数据。

最佳答案

我相信我已经找到问题了。在包含的js文件(page.js)中，我有以下声明:

var $ = require('jquery')

我将document.ready块放入了包含的js文件中，并删除了require行。现在show.js.tab事件正在触发。

关于bootstrap-4 - shown.bs.tab事件未在 Electron 应用程序中触发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52427982/

25 4 0
文章推荐： Electron | onbeforeunload 防止重新加载
文章推荐： electron - 导入证书时的 Electron 加载页面
文章推荐： Electron - ipcRenderer 错误 : Cannot read property 'send' of undefined
文章推荐： javascript - 如何在 Electron 浏览器窗口中查看PDF？
行者123
个人简介

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

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