引导弹出窗口切换事件不起作用答案

【问题标题】：Bootstrap popover toggle event not working引导弹出窗口切换事件不起作用
【发布时间】：2018-09-19 02:27:16
【问题描述】：

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

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

<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>

【问题讨论】：

请分享html代码
感谢回复，我已经添加了html代码

标签： javascript jquery html twitter-bootstrap popover

【解决方案1】：

只需将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'));"});
        }
    });
});

<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>

【讨论】：

تعال ابوسك o:::

【解决方案2】：

这里是 Popover 和 Modal 引导文档。

$(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/

【讨论】：

我知道。在询问之前我浏览了这些文档。另外我正在使用 js 来渲染弹出框，所以不需要这个。
那么，您是在尝试用 Javascript 而不是 jQuery 和 Bootsrap 来实现，对吧？