Adding different Twitter Bootstrap popovers to dynamically created elements

Question

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 1

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.