Bootstrap popover切换事件无效

Question

此代码应该显示一个弹出框并在单击后隐藏它，但它只显示并且不会隐藏。

Open

$(function() {
    var p = $('p#paragraph');

    p.html(function(index, oldHtml) {
        return oldHtml.replace(/\b(\w+?)\b/g, '<span id="word" >$1</span>')
    });

    p.click(function(event) {
        if (this.id != event.target.id && this.class != "#highlight-plugin") {
            var word = event.target.innerHTML;
            var translate = $(event.target).popover({
                trigger: "manual",
                placement: "auto",
                content: "Blabla",
                trigger: "click"
            });
            $(translate).popover('toggle');
            $(event.target).toggleClass("highlight");
            //$(event.target).attr({onclick: "void($(#word).popover('distroy'));"});
        }
    });
});

Answer 1

以下是Popover和Modal bootstrap文档。

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

HTML

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

https://getbootstrap.com/docs/4.0/components/popovers/ https://getbootstrap.com/docs/4.0/components/modal/

Answer 2

只需将foreach($prices as $price) { $data[]["id"] = $price->id; } $result["data"] = $data; echo json_encode($result); 属性参数从trigger:更改为"click"，如下所示：

"manual"

$(function() {
    var p = $('p#paragraph');

    p.html(function(index, oldHtml) {
        return oldHtml.replace(/\b(\w+?)\b/g, '<span id="word" >$1</span>')
    });

    p.click(function(event) {
        if (this.id != event.target.id && this.class != "#highlight-plugin") {
            var word = event.target.innerHTML;
            var translate = $(event.target).popover({
                trigger: "manual",
                placement: "auto",
                content: "Blabla",
                trigger: "manual"
            });
            $(translate).popover('toggle');
            $(event.target).toggleClass("highlight");
            //$(event.target).attr({onclick: "void($(#word).popover('distroy'));"});
        }
    });
});