html没有附加到弹出窗口上的轮播

Question

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

初始化的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 , currenttype,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 , 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);
        }       
    }             
});

我也试过 appendTo 也一样

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

请帮忙解决这个问题

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

注意：我使用的是 Bootstrap 5

Answer 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 , 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();
           
});

Answer 2

在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 , 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);
        }       
    }             
}).popover({ 
    html: true,
    content: function() {       
    return $('.popup').html();
}});