显示.bs.tab 事件未在电子应用程序中触发答案

【问题标题】：shown.bs.tab event not firing in electron app显示.bs.tab 事件未在电子应用程序中触发
【发布时间】：2018-09-20 14:54:47
【问题描述】：

在尝试解决 datatables.net 标头大小问题（在隐藏选项卡中创建时标头未按表主体调整大小）时，我发现运行页面时从未调用我的事件侦听器函数从电子（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 对象。

【问题讨论】：

Electron: jQuery is not defined的可能重复
看看这个github.com/electron/electron/issues/11082
见我上面的编辑。当我单击选项卡时，单击事件正在触发。另外，我正在包含的 js 脚本（“page.js”）中执行 require('jquery')
另一个怪事。当我注册shown.bs.tab事件并在开发工具窗口中查看事件侦听器时，我看到这些元素的事件“显示”，但没有看到“shown.bs.tab”。我尝试破解bootstrap.js文件以使用事件“shownbstab”（不带点）并更改我的 javascript 以注册相同的事件名称，但事件侦听器功能仍然没有触发。
我真的对电子一无所知，我只能确定你的标记是正确的 -> jsfiddle.net/cy0kx44o/294 并在谷歌搜索后意识到似乎有一些常见的错误。 *.bs.tab 只是一个命名空间，你不必担心。

标签： bootstrap-4 electron datatables-1.10

【解决方案1】：

我相信我已经找到了问题所在。在包含的 js 文件（page.js）中，我有这样的声明：

var $ = require('jquery')

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

【讨论】：