如何解决如果使用 JS 设置 Bootstrap carousel 将不起作用
Bootstrap carousel 在下面的示例中不起作用。当我将其复制到 .content
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function Type_Button() {
$("div#content").html('<div id="Doodle" class="carousel slide" data-ride="carousel" data-interval="500"><div class="carousel-inner"><div class="item active" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-loteria-2019-6753651837108772.2-2xa.gif"></div><div class="item" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-halloween-2016-6753651837108773-2xa.gif"></div></div></div>');
}
window.onload = Type_Button;
</script>
</head>
<body>
<div id="content"></div>
</body>解决方法
当您尝试在 body onload 后注入 html 代码时，您需要手动调用 carousel 方法。
手动调用轮播（在 Type_Button() 函数的末尾）：
$('.carousel').carousel()
你可以在里面尝试一堆选项 - 检查 -> https://getbootstrap.com/docs/4.3/components/carousel/#options
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>
function Type_Button() {
$("div#content").html('<div id="Doodle" class="carousel slide" data-ride="carousel" data-interval="500"><div class="carousel-inner"><div class="item active" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-loteria-2019-6753651837108772.2-2xa.gif"></div><div class="item" style="padding: 0;"><img src="https://www.google.com/logos/doodles/2020/stay-and-play-at-home-with-popular-past-google-doodles-halloween-2016-6753651837108773-2xa.gif"></div></div></div>');
$('.carousel').carousel();
}
window.onload = Type_Button;
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
