我正在使用 Bootstrap 4 和 E-junkie 购物车。然后我想更新为使用 Bootstrap 5,但我遇到了一个问题,即在较小的屏幕上,导航栏显示折叠按钮,但单击时它不起作用。我对 navabar 和简化代码做了一些 boostrap 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
<anonymous> 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
<anonymous> collapse.js:287
n event-handler.js:118
但是我不明白。
下面的完整示例:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SongKong Music Tagger</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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>
折叠按钮不起作用,但如果注释掉该行
<script src="https://www.fatfreecartpro.com/ecom/box_fb_n.js" type="text/javascript">
然后它就起作用了(当然购物车然后就不起作用了)
Javascript 的内容是:
/*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);
如何修复 Javascript 使其与 Bootstrap 5 兼容?
Update 我可以看到 javascript 在开始时有大量无效行,我确实直接将它添加到我的示例中并删除了无效行,但这没有任何区别。
......
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script type="text/javascript">function EJEJC_lc(th) { return false; }; </script>
<script>
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);
</script>
</body>
</html>
此外,即使我从导航栏中删除“查看购物车”按钮,它仍然会导致问题。所以我想点击折叠按钮会导致它在我们甚至不想调用它但我不明白它是如何工作的时候被调用。
jQuery 检测冲突
通过减小浏览器窗口大小,我能够在 Android 和桌面上重现错误。
问题
Bootstrap 5 和 e-Junkie 脚本之间存在冲突。 Bootstrap 5 不需要 jQuery,但会在检测到时使用它。这就是问题的根源。 e-junkie 还尝试检测 jQuery 并似乎设置了一些变量,导致 Bootstrap 检测已安装的 jQuery。然而,它没有安装并导致 Bootstrap 脚本失败。
解决方法
如果您在脚本中包含 jQuery,它会按预期工作。可能有一种方法可以在不加载 jQuery 的情况下解决问题,但我没有进一步深入研究 e-junkie 代码。
片段
e-Junkie 在片段中运行有问题。所以我建议查看功能齐全的JSFiddle版本。
body {
padding-top: 100px;
background-color: whitesmoke;
}
<div class="container-fluid fixed-top bg-primary" 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>
<!-- libraries -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<script src="https://www.fatfreecartpro.com/ecom/box_fb_n.js" type="text/javascript"></script>
<script type="text/javascript">
function EJEJC_lc(th) {
return false;
};
</script>