在尝试实现 datatables.net 标头大小问题的修复时(在隐藏选项卡中创建标头时，标题的大小不会调整到表体(，我发现当我从 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 的控制台.log显示一个空数组和一个似乎没有数据的 _Api 对象。
我相信我已经找到了问题所在。 在包含的js文件(页面.js(中，我有以下语句：
var $ = require('jquery'(
我将 document.ready 块放在包含的 js 文件中，并删除了 require 行。 现在显示的 .js.tab 事件正在触发。