在尝试解决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对象似乎没有数据。
答案 0 :(得分：0)
我相信我已经找到了问题。在包含的js文件（page.js）中，我声明：
var $ = require（'jquery'）
我将document.ready块放入包含的js文件中，并删除了require行。现在show.js.tab事件正在触发。