【发布时间】：2019-12-11 07:21:11
【问题描述】：
我正在学习引导轮播。但是当我将页面加载到 Firefox 72 / chromium / falkon 时，间隔在 $( document ).ready(...)、$(() = {...}) 内不起作用，但没有它们也能成功。
代码
<!Doctype HTML>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Carousels</title>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.4-dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="images/a.jpg"/>
<div class="carousel-caption">First Slide</div>
</div>
<div class="item">
<img src="images/b.jpg"/>
<div class="carousel-caption">Second Slide</div>
</div>
<div class="item">
<img src="images/a.jpg"/>
<div class="carousel-caption">Third Slide</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
$( document ).ready(() => {
// works
window.console.log('hi')
// Doesn't work
$('.carousel').carousel({
interval: 100
})
})
</script>
</body>
</html>
此代码有 2 个图像，分别称为 a.jpg 和 b.jpg，它们显示正确。但是，如果我将 $(document).ready() 注释掉，则代码可以正常工作（从一个图像更改为另一个图像而无需滑动），尽管我的讲师的代码在 $() JQuery 函数中工作正常！
为什么滑动间隔在 JQuery 中不起作用？
【问题讨论】：
-
你可以试试
$(document).on('your_action', 'your_id_or_class', function() {"your code goes here"}) -
如果我使用
$( document ).on('mouseover', '#myCarousel', () => {...}进行测试，在重新加载页面后，它有时会在鼠标悬停时激活，有时不会，widow.console.log('hi')工作正常... -
你把它放在document.ready函数之外
-
它在 document.ready 之外工作，但我的导师显示它应该在 document.ready() 中！教练有 10000 毫秒的延迟，但它没有经过很好的测试......我使用 100 毫秒的延迟只是为了测试它是否有效，但由于某种原因它不起作用！
-
@S.Goswami，我已经更新了你的代码。请检查并告诉我。
标签： jquery twitter-bootstrap-3 bootstrap-carousel