bounty将在17小时后到期。回答此问题可获得+100声望奖励。Paul Taylor希望引起更多关注这个问题。
我使用的是Bootstrap 4和E-junkie购物车。然后我想更新到使用Bootstrap 5,我遇到了一个问题,在较小的屏幕上,导航栏显示折叠按钮,但点击时不起作用。我做了一些bootstrap 5修复导航栏和简化代码,发现问题是电子迷需要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
但我不明白。
完整示例如下:
<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>
折叠按钮不起作用,但如果我注解掉该行
<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兼容?
更新我可以看到javascript在开始时有一堆不起作用的行,我确实直接添加了我的示例,删除了不起作用的行,但这没有什么区别。
......
<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>
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>
此外,即使我从导航栏中删除查看购物车按钮,它仍然会导致问题。所以我猜点击折叠按钮会导致它被调用,而我们甚至不想调用它,但我不明白它是如何工作的。
https://www.e-junkie.com/
1条答案
按热度按时间y53ybaqx1#
答案很简单:bootstrap和e-junkie购物车不兼容。联系制造商,问他们是否可以修复它。
长回答:你可以补救
问题是
bootstrap
不需要jQuery
,但如果存在jQuery
,bootstrap
会实现它的一些方法,因此您可以将jQuery
语法与bootstrap
结合使用。参见documentation:Bootstrap 5被设计为不使用jQuery,但仍然可以使用我们的组件与jQuery。如果Bootstrap在窗口对象中检测到jQuery,它将在jQuery的插件系统中添加所有组件;这意味着你可以使用$('[data-bs-toggle=“tooltip”]').tooltip()来启用工具提示。我们的其他组件也是如此。
现在,对于
e-junkie
,实现了类似的事情。如果e-junkie
注意到页面上没有加载jQuery
,它将向页面添加自己的jQuery
实现。此实现是基本的:它只实现了e-junkie
需要的一些方法,而不是全部。一旦
e-junkie
将jQuery
添加到页面,问题就开始了。bootstrap
认为安装了jQuery
,并尝试使用e-junkie
的实现。但是bootstrap
认为存在的原始jQuery
实际上是由e-junkie
实现的精简版本。因此,bootstrap
发出警告,指出jQuery
对象的Event
属性不是函数。现在,你可以做两件事:把
jQuery
添加到页面。您应该将其添加到bootstrap
和e-junkie
脚本之前。如果您使用的是最新的jQuery
版本(当前为3.7.0),您还应该添加jquery-migrate,因为bootstrap 5
与最新版本不兼容。(jquery-migrate确保jQuery
向后兼容。)一个更简单的解决方案是告诉
bootstrap
不要使用jQuery
,即使它被加载到页面上。您可以通过将以下属性添加到body
标记来完成此操作:请参阅
bootstrap
的文档:如果窗口对象中存在jQuery,并且
<body>
上没有设置data-bs-no-jquery属性,Bootstrap将检测jQuery。问题解决:
bootstrap
将远离jQuery
,并且不使用由e-junkie
创建的jQuery
对象。