Bootstrap 5与E-junkie购物车兼容问题修复咨询

问题背景 #

原本使用Bootstrap 4搭配E-junkie购物车，升级到Bootstrap 5后，小屏幕下导航栏的折叠按钮点击无响应。已完成导航栏的Bootstrap 5适配简化，最终定位问题源于E-junkie购物车所需的JavaScript代码——注释掉该脚本后，折叠按钮恢复正常，但购物车功能失效。

点击折叠按钮时，Firefox开发者工具报错：

Uncaught TypeError: n.Event is not a function
trigger event-handler.js:274
show collapse.js:129
toggle collapse.js:107
collapse.js:287
n event-handler.js:118
event-handler.js:274:22
trigger event-handler.js:274
show collapse.js:129
toggle collapse.js:107
collapse.js:287
n event-handler.js:118

复现代码 #

完整测试代码如下：

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SongKong Music Tagger</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
<!-- /head -->
<body style="padding-top: 100px;">

<!-- header -->
<div class="container-fluid fixed-top" style="background-image: url(/songkong/images/songkongheader.png);">
    <div class="navbar container-fluid navbar-expand-lg navbar-dark mx-auto justify-content-center">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <div class="navbar-nav">
                <a class="nav-item nav-link" href="https://www.jthink.net/songkong/en/news.jsp">
                    News
                </a>
                 <a class="nav-item nav-link" href="https://www.fatfreecartpro.com/ecom/gb.php?c=cart&ejc=2&cl=347010" target="ej_ejc" onclick="return EJEJC_lc(this);">
                View Cart
                </a>
            </div>
        </div>
    </div>
</div>
<!-- footer -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script> 
<script type="text/javascript">function EJEJC_lc(th) { return false; }; </script>
<script src="https://www.fatfreecartpro.com/ecom/box_fb_n.js" type="text/javascript"></script>
</body>
</html>

涉事脚本内容 #

引发冲突的box_fb_n.js代码如下：

/*var d = document;
var EJV1_cart_version = 1;
var EJV1_loadFlag = false;  // this defines whether or not box.js should search for ?cl

var url = "https://www.e-junkie.com/ecom/box.js";
var t=d.createElement('script');
    t.setAttribute('src', url);
    d.getElementsByTagName('head')[0].appendChild(t);*/

var d = document;
var EJV1_cart_version = 1;
var EJV1_loadFlag = false;      // this defines whether or not box.js should search for ?cl
var EJV1_box_preloaded = true;
var url = "https://www.e-junkie.com/ecom/restified/checkStatusL.php?cl="+EJV1_cart_version;
var t=d.createElement('script');
    t.setAttribute('src', url);
    d.getElementsByTagName('head')[0].appendChild(t);

已尝试的无效操作 #

1. 移除脚本开头的注释无效代码，直接嵌入页面，问题仍存在；
2. 移除导航栏中的「查看购物车」按钮，折叠按钮依然无法正常工作。

推测点击折叠按钮时会触发该脚本，但不清楚具体运行机制。

求助需求 #

如何修改该JavaScript代码，使其与Bootstrap 5兼容？

内容的提问来源于stack exchange，提问作者Paul Taylor