html 不附加到弹出窗口的轮播

Question

我正在尝试制作一个带有 bootstrap 轮播的弹出窗口，轮播项目将在其中生成并从脚本附加，但我得到了轮播，但我无法附加该项目。试了好几次都没找到解决办法

初始化的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 as

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

请帮忙解决这个问题

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

注：我用的是Bootstrap5

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

html 不附加到弹出窗口的轮播

html not appending to the carousel on popover

html

javascript

jquery

carousel

bootstrap-5