Rainier9 Rainier9 - 6 months ago 9
Javascript Question

Adding different Twitter Bootstrap popovers to dynamically created elements

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:


  1. Having 2 Selectors and calling them in different
    $('body')popover({...})
    functions.

  2. Changing the
    body
    element to a dynamically generated container.

  3. Changing the variable that has the "content" data each time a new element is focused.



Any ideas?

Answer

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.