Bootstrap Carousel不能在JS中动态创建的元素上工作

我试图创建一个像LinkedIn这样的社交媒体类型的提要，其中每个div元素都是一个旋转显示图像，就像社交媒体提要一样。在JS中，基于来自API的响应，我动态地为carousel创建了以下带有图像的元素:

<div  class="carousel slide" data-bs-ride="carousel">
<div class="linkedin_left">
<div class="user-cred_main">
<div class="img_main"> <img src="company_logo.jpg" alt="company_logo"></div>
<div class="user_cred">
<h3>Company Name</h3>
</div>
</div>
<div class="linkedin_right">
<img src="linkedin_logo.png" alt="linked-in_logo">
</div>
</div>
<p class="linkedin_content">Caption for social media post</p>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="img.jpg" class="d-block w-100" alt="...">
</div>
</div>

上面的代码片段是从JS动态创建的，并显示为社交媒体帖子，其中包含公司徽标，名称，标题和显示为旋转木马的图像。我使用了下面的cdn来包含Bootstrap:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

问题是bootstrap carousel对上述动态渲染元素不起作用。如果我将上面的代码段直接硬编码到html正文中，carousel就会开始工作，但它不会在动态生成的同一代码段上工作。我检查在Chrome开发工具，动态生成的元素是完全相同的硬编码元素，但它只适用于后者。我试过摆弄"data-bs-ride=carousel"属性，但这没有帮助。我是新的引导，所以我没有很多的解决方案。任何意见都会对我有帮助。

编辑:将旋转幻灯片追加到正文的脚本函数

function Posts1(obj){
requestBody.companyId=obj.companyId;
requestBody.accessToken=obj.accessToken;
console.log(requestBody);
const options={
method:'POST',
headers: {
'Content-Type': 'application/json'
},
body: requestBody
}
var xmlhttp = new XMLHttpRequest();   // Get Ugc Posts api call 
theUrl = "https://localhost:44346/api/GetUgcPosts";
xmlhttp.open("POST", theUrl);
xmlhttp.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xmlhttp.send(JSON.stringify(requestBody));
xmlhttp.onload=()=>{
if(xmlhttp.status==200){
let i=0;
data=JSON.parse(xmlhttp.response);
data.post.slice().forEach(element => {
const linkedin_sec=document.createElement('div');
linkedin_sec.className="carousel slide";
linkedin_sec.setAttribute("data-bs-ride","carousel")
let link="";
let caption="";           
const pfp_name='<div class="linkedin_left"><div class="user-cred_main"><div class="img_main"> <img src="'+data.pfp+'" alt="user_avatar"></div><div class="user_cred"><h3>'+data.orgName+'</h3></div></div><div class="linkedin_right"><img src="/img/linkedin.png" alt="linked-in_avatar"></div></div>';                
if(element.caption.includes('https')){
link=element.caption.split('https')[1].split(' ')[0];
caption='<p class="linkin_content">'+element.caption+'</p><a href="https'+link+'">Follow Link</a>'
}
else{
caption='<p class="linkin_content">'+element.caption+'</p>'
}
const slides=document.createElement('div');
slides.className="carousel-inner";
let i=0;
element.imgUrl.forEach(img=>{

const imgSlide='<div class="carousel-item active"><img src="'+img+'" class="d-block w-100" alt="..."></div>';
i++;
slides.insertAdjacentHTML("afterbegin",imgSlide);
})
if((element.imgUrl[0])&&(element.imgUrl.length>1)){
}

linkedin_sec.innerHTML=pfp_name+caption;
linkedin_sec.appendChild(slides);
document.body.insertBefore(linkedin_sec, document.body.firstChild);
})
}
else{
console.log("Error")
}

}

}

还添加了以下脚本

<script>
$(window).load(function(){
$('.carousel').carousel({
interval:1000
});
console.log("window is loaded");
})
</script>

请检查

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<div class="carousel slide" data-bs-ride="carousel">
<div class="linkedin_left">
<div class="user-cred_main">
<div class="img_main"> <img src="https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8TE9HT3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" alt="company_logo"></div>
<div class="user_cred">
<h3>Company Name</h3>
</div>
</div>
<div class="linkedin_right">
<img src="https://images.unsplash.com/photo-1611944212129-29977ae1398c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8TElOS0VESU58ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" alt="linked-in_logo">
</div>
</div>
<p class="linkedin_content">Caption for social media post</p>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://images.unsplash.com/photo-1520209759809-a9bcb6cb3241?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1520209759809-a9bcb6cb3241?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="https://images.unsplash.com/photo-1520209759809-a9bcb6cb3241?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" class="d-block w-100" alt="...">
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>  
</body>
</html>

我想我可能犯了一个非常愚蠢的错误。因此，引导旋转木马现在适用于所有的静态和动态元素。我所要做的就是把下面的jQuery片段从html文件移到我的script.js中，在所有的动态元素都被附加到html正文之后。

<script>
$(window).load(function(){
$('.carousel').carousel({
interval:1000
});
console.log("window is loaded");
})
</script>

相关内容

最新更新

热门标签：