html 未附加到 popover 上的轮播

如何解决html 未附加到 popover 上的轮播

我正在尝试使用 bootstrap carousel 制作一个弹出框，以及从脚本生成和附加 carousel 项目的位置，但我得到了 carousel，但我无法附加该项目。我很努力，但我没有想出解决办法。

初始化的HTML如下

HTML：

<div class="popup" data-popup="popup-1">
    <div class="popup-inner">
        <a href="#" class="pop-head"><i class="fas fa-bars"></i></a>
        <div class="frame">
            <div id='carousel' class='carousel slide' data-bs-ride='carousel'> 
                <div class='carousel-inner items-slider1'>
                </div>
            </div>
        </div>
    </div>
</div>

我试过的脚本是

Javascript：

function findallchord(currentchord,currenttype) {
    for (let i = 1; i < 10; i++) {
        if (Raphael.chord.find(currentchord,currenttype,i)) {
            Raphael.chord("div3",Raphael.chord.find(currentchord,i),currentchord +' ' +currenttype).element.setSize(75,75);
        }
    }
}   

var getChordRoots = function (input) {
    if (input.length > 1 && (input.charat(1) == "b" || input.charat(1) == "#"))
        return input.substr(0,2);
    else
        return input.substr(0,1);
};

$('.popup').on('shown.bs.popover',function () {
    $('.carousel-inner').carousel();
});

$('[data-bs-toggle="popover"]').popover({ 
    html: true,content: function() {       
    return $('.popup').html();
}}).click(function() {
    var oldChord = jQuery(this).text();
    var currentchord = getChordRoots(oldChord);
    var currenttype = oldChord.substr(currentchord.length);
    findallchord(currentchord,currenttype);                
    var chordsiblings = $('#div3').children().siblings("svg");
    for (let i = 1; i < 10; i++) {
        if (Raphael.chord.find(currentchord,i)) {
            var itemid = "chord" + i;
            var theDiv  = "<div class='carousel-item"+((itemid=="chord1") ? ' active':'')+" ' id='"+currentchord+''+itemid+"'> "+chordsiblings[i-1].outerHTML+" </div>";            
            $('.items-slider1').append(theDiv);
        }       
    }             
});

我也试过 appendTo 也是

$(theDiv).appendTo('.items-slider1');

请帮忙解决这个问题

这是我得到的输出，附加的元素不在轮播中

注意：我使用的是 Bootstrap 5

解决方法

在设置好轮播后尝试实例化它

/*
$('.popup').on('shown.bs.popover',function () {
    $('.carousel-inner').carousel();
});
*/

$('[data-bs-toggle="popover"]').popover({ 
    html: true,content: function() {       
    return $('.popup').html();
}}).click(function() {
    var oldChord = jQuery(this).text();
    var currentchord = getChordRoots(oldChord);
    var currenttype = oldChord.substr(currentchord.length);
    findallchord(currentchord,currenttype);                
    var chordsiblings = $('#div3').children().siblings("svg");
    for (let i = 1; i < 10; i++) {
        if (Raphael.chord.find(currentchord,currenttype,i)) {
            var itemid = "chord" + i;
            var theDiv  = "<div class='carousel-item"+((itemid=="chord1") ? ' active':'')+" ' id='"+currentchord+''+itemid+"'> "+chordsiblings[i-1].outerHTML+" </div>";            
            $('.items-slider1').append(theDiv);
        }       
    }  
    $('.carousel-inner').carousel();
           
});

,

需要在popover之前先调用click函数，如下图

$('[data-bs-toggle="popover"]').click(function() {
    var oldChord = jQuery(this).text();
    var currentchord = getChordRoots(oldChord);
    var currenttype = oldChord.substr(currentchord.length);
    findallchord(currentchord,i)) {
            var itemid = "chord" + i;
            var theDiv  = "<div class='carousel-item"+((itemid=="chord1") ? ' active':'')+" ' id='"+currentchord+''+itemid+"'> "+chordsiblings[i-1].outerHTML+" </div>";            
            $('.items-slider1').append(theDiv);
        }       
    }             
}).popover({ 
    html: true,content: function() {       
    return $('.popup').html();
}});