I have a dynamic set of contenteditable divs. Divs that have class .showPopover, will have a popover. The popover trigger is set to manual, because I want them to appear on focus, but not always hide on blur.
I found here [question]: Bootstrap Tooltip with manual trigger and selector option
that I can't use the selector method together with the manual trigger, so I followed one of the answers there, but the popover still doesn't appear for dynamically added divs.
The problem is, that I only want popover to appear for divs with specific class, which is not added together with the div.
The change of div's class for the popover is a bit simplified with an enable button.
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 = true;
});
});
Jsfiddle: http://jsfiddle.net/Lh2rpj0f/2/
Jquery 1.11.1, Bootstrap 3.3.2
So thanks to Yenne Info, I've got a working solution:
http://jsfiddle.net/Lh2rpj0f/4/
It might not be the best solution, but it does exactly what I wanted. (When I click the button inside popover, this popover is not destroyed when Enable button is clicked.)
As for now, my final solution: Bootstrap popover with manual trigger attached on dynamic content
