0

我正在一个调用数据库的网站上工作。它从数据库中获取 JSON 并循环通过一个特定的节点——将 HTML 代码附加到一个 div 标记，从而为每个数据库条目创建一个卡片。我希望能够在单击卡片时出现引导弹出框（或工具提示）（或悬停在工具提示上）。在函数中生成的卡片根本无法生成弹出框或工具提示。如果我使用 JQuery 在函数外部附加相同的 HTML 代码，它就可以正常工作。我不确定这里发生了什么。

这是遍历数据库 JSON 并为每个孩子创建一张卡片的函数。

function getWeekEvents(day, id) {
    return firebase.database().ref(day).once('value').then(function(snapshot) {
        var data = snapshot.val();
        for (item in data) {
            var event = data[item]["event"];
            var loc = data[item]["loc"];
            var time = data[item]["time"];

            $("#" + id).append("<div class='card border border-primary week-cards-ann event-style' data-toggle='popover' data-content='Content' data-placement='right'>" + 
                                    "<div class='card-body my-lg-n3'>" + 
                                        "<div class='card-text my-lg-n1 float-left ml-lg-n3'>" + 
                                            "<p>" + event.substring(0,10) + "...</p>" +
                                        "</div>" + 
                                    "</div>" +
                                "</div>");
        }

    });
}

下面的代码在任何函数之外并且工作得很好。它以相同的方式创建卡片，但 Popover 有效。

$("#tuesday").append("<div class='card border border-primary week-cards-ann event-style' data-toggle='popover' data-placement='top' title='Hello'>" + 
"<div class='card-body my-lg-n3'>" + 
    "<div class='card-text my-lg-n1 float-left ml-lg-n3'>" + 
        "<p>" + "...</p>" +
    "</div>" + 
"</div>" +
"</div>");

而且我也有 Popovers 工作所需的这一部分。

$(function () {
    $('[data-toggle="popover"]').popover()
});

我也尝试以相同的方式创建工具提示，而不是弹出框，但它导致了同样的问题。这让我相信 data-toggle 属性可能发生了什么？我可能是错的。有人有想法吗？

4

0 回答 0