I'm trying to add popovers to dynamically created elements. Each kind of element (either a ContentEditable or an Img or a Video) needs to have a different popover content.
Because they are dynamic elements, I'm calling the popovers as follows:
$('body').popover({
selector: '[rel=popoverImage]',
content: **popoverImage**,
html: true,
placement: 'top',
trigger: 'focus'
});
Where popoverImage
is a variable that has the content of the popover for the img element.
The issue comes when I try to add another popover. It doesn't show. I've tried the following:
$('body')popover({...})
functions.body
element to a dynamically generated container.Any ideas?
What you need is when you add a new control add the popover at the same time:
function AddNewElement()
{
var yourElement = '<div id="yourElementId"> The element you want </div>';
$('divToAppend').append(youElement);
var yourPopoverContent = 'Your Personalized popover';
$('#yourElementId').popover({
html : true,
content : yourPopoverContent
});
}
This should work with your actual code for the popover.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With