Bootstrap 弹出窗口切换事件不起作用

Question

此代码本应向我显示弹出窗口并在单击后将其隐藏，但它只显示并没有隐藏。

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

    p.html(function(index, oldHtml) {
        return oldHtml.replace(/\b(\w+?)\b/g, '<span id="word" ></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'));"});
        }
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<body>
    <div class="container">
        <p id="paragraph">word is sold</p>
    </div>      
</body>

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

只需将 trigger: 属性参数从 "click" 更改为 "manual"，如下所示：

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

    p.html(function(index, oldHtml) {
        return oldHtml.replace(/\b(\w+?)\b/g, '<span id="word" ></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'));"});
        }
    });
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
   <div class="container">
      <p id="paragraph">word is sold</p>
   </div>
</body>

Bootstrap 弹出窗口切换事件不起作用

Bootstrap popover toggle event not working

javascript

jquery

html

twitter-bootstrap

popover