引导弹出窗口切换事件不起作用
Posted
技术标签:
【中文标题】引导弹出窗口切换事件不起作用【英文标题】：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代码 【参考方案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 来实现，对吧？以上是关于引导弹出窗口切换事件不起作用的主要内容，如果未能解决你的问题，请参考以下文章