Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 224
RainierMallol Avatar asked Sep 11 '13 01:09

RainierMallol


1 Answers

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.

like image 87
nramirez Avatar answered Oct 10 '22 02:10

nramirez