我有一组动态的 contenteditable div。具有“.showPopover”类的 Div 将有一个弹出窗口。弹出框触发器设置为手动,因为我希望它们出现在焦点上,但并不总是隐藏在模糊处。
我在这里找到[问题]:带有手动触发器和选择器选项的 Bootstrap Tooltip ,我无法将“选择器方法”与手动触发器一起使用,所以我按照那里的答案之一进行操作,但弹出窗口仍然没有出现动态添加的div。
问题是,我只想为具有特定类的 div 显示弹出窗口,该类不与 div 一起添加。
弹出窗口的 div 类的更改通过启用按钮进行了一些简化。
jQuery(document).ready(function($) {
$('a.add').on('click', function(event) {
event.preventDefault();
$('.container').append('<p class="input" contenteditable="true"></p>');
});
$('a.enable').on('click', function(event) {
event.preventDefault();
$('.input').not('.showPopover').addClass('showPopover');
});
$('.container').on('focus', '.input.showPopover', function(event) {
if (!$(this).data("bs.popover")) {
$(this).popover({
placement:'right',
trigger:'manual',
html:true,
content:'<a href="#" class="btn btn-danger">Remove</a>'
});
}
$(this).popover('show');
});
var mousedownHappened = false;
$('.container').on('blur', '.input', function(event) {
if(mousedownHappened) {
mousedownHappened = false;
} else {
$(this).popover('hide');
}
});
$('.container').on('mousedown', '.popover .btn', function(event) {
mousedownHappened = …Run Code Online (Sandbox Code Playgroud)