将不同的Twitter Bootstrap插件添加到动态创建的元素 [英] Adding different Twitter Bootstrap popovers to dynamically created elements

问题描述

我正在尝试向动态创建的元素添加popovers。每种元素（ContentEditable或Img或Video）需要具有不同的popover内容。

由于它们是动态元素，我正在调用该插件如下：

  $（'body'）。popover（{
 selector：'[rel = popoverImage] ，
 content：** popoverImage **，
 html：true，
 placement：'top'，
 trigger：'focus'
}）; 
  

其中 popoverImage 是一个变量， img元素的popover的内容。

当我尝试添加另一个popover时，问题出现。它不显示。我已经尝试了以下内容：

1. 有2个选择器，并以不同的 $（'body'）popover （{...}）函数。


2. 将正文元素更改为动态生成的容器。


3. 每次新的元素集中时，更改具有内容数据的变量。

任何想法？

解决方案

您需要的是当您添加新控件时同时添加popover： p>

  function AddNewElement（）
 {
 var yourElement ='< div id =yourElementId>你想要的元素< / div>'; 
 $（'divToAppend'）。append（youElement）; 
 
 var yourPopoverContent ='您的个性化popover'; 
 
 $（'＃yourElementId'）。popover（{
 html：true，
 content：yourPopoverContent 
}）; 
 
} 
  

这应该适用于您的实际代码。 / p>

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?

解决方案

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.

这篇关于将不同的Twitter Bootstrap插件添加到动态创建的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！