Javascript Bootstrap popover在动态控件上显示标题，但不显示内容

我有一个ASP.NET项目，使用.NET4.5和VisualBasic以及Bootstrap3.7。在特定页面上，根据用户的选择，在页面的

MainContent

容器中创建动态html表。该表的数据来自SQL Server数据库。在表的选定单元格中，使用javascript函数调用添加一个图像（在创建表的同时动态添加），以创建和打开引导弹出窗口。javascript函数位于页面的

MainContent

容器内。向函数发送3个参数-图像id、标题和适用于此图像的内容。所有3个值都作为字符串值发送

popover的工作原理与我期望的完全一样，只是它没有填充内容。当我从一个popover图像单击到另一个时，会显示每个不同popover的相应标题，并且popover位于正确的位置。我知道数据是通过javascript函数发送和接收的。如果在JavaScript函数中我将document.getElementById（ctrlTransfer）更改为

'image'

，弹出窗口将显示正确的标题和内容。（它不是由单击的特定popover图像定位，而是由页面上的第一个非动态图像定位。此外，当替换了

'image'

时，单击其他popover图像不会更改标题或内容。）

下面是JavaScript函数

<script type="text/javascript">
   function DisplayTransferValues(TransferControl, TransferTitle, TransferValue) {
      if (TransferTitle != 'undefined') {
         var ctrlTransfer = 'MainContent_' + TransferControl;

         $document.getElementById(ctrlTransfer)).popover({
            trigger: 'hover',
            html: true,
            title: TransferTitle,
            content: TransferValue,
         }).popover("show");
      }
   }
</script>

页面代码隐藏中的其他代码实际上将此图像添加到表单元格中

我已经采取的步骤：

在DisplayTransferValues函数中添加了一个函数，用于接收内容的数据并进行填充

为加载时间的DisplayTransferValue添加了延迟

切换发送到函数的参数中“TransferTitle”和“TransferValue”的顺序。它成功地将TransferValue中的正确数据加载到popover的标题区域

我希望有两个标题和内容在弹出框填充

---

谢谢你的帮助。

我做了一些额外的研究，在getbootstrap.com上发现有时父元素的样式会干扰popover中的html。只需添加容器：“body”，即可解决以下问题：

<script type="text/javascript">
   function DisplayTransferValues(TransferControl, TransferTitle, TransferValue) {
      if (TransferTitle != 'undefined') {
         var ctrlTransfer = 'MainContent_' + TransferControl;
         $document.getElementById(ctrlTransfer)).popover({
            container: ' body',
            trigger: 'hover',
            html: true,
            title: TransferTitle,
            content: TransferValue,
         }).popover("show");
      }
   }
</script>

函数显示TransferValue（TransferControl、TransferTitle、TransferValue）{
如果（TransferTitle！=“未定义”）{
var ctrlTransfer='MainContent\'+TransferControl；
$document.getElementById（ctrlTransfer））.popover({
容器：'主体'，
触发器：“悬停”，
是的，
名称：转让名称，
内容：转让价值，
}).popover（“show”）；
}
}

---

现在，在Bootstrap Popover中正确填充了标题和内容。

我做了一些额外的研究，在getbootstrap.com上发现，有时父元素的样式会干扰Popover中的html。只需添加容器：“body”，即可解决以下问题：

<script type="text/javascript">
   function DisplayTransferValues(TransferControl, TransferTitle, TransferValue) {
      if (TransferTitle != 'undefined') {
         var ctrlTransfer = 'MainContent_' + TransferControl;
         $document.getElementById(ctrlTransfer)).popover({
            container: ' body',
            trigger: 'hover',
            html: true,
            title: TransferTitle,
            content: TransferValue,
         }).popover("show");
      }
   }
</script>

函数显示TransferValue（TransferControl、TransferTitle、TransferValue）{
如果（TransferTitle！=“未定义”）{
var ctrlTransfer='MainContent\'+TransferControl；
$document.getElementById（ctrlTransfer））.popover({
容器：'主体'，
触发器：“悬停”，
是的，
名称：转让名称，
内容：转让价值，
}).popover（“show”）；
}
}

---

现在，标题和内容都正确地填充在引导Popover中。

我发现有时父元素的样式会干扰Popover中的html。只需添加

container:'body'，

就解决了这个问题：

函数DisplayTransferValues（TransferControl，TransferTitle，TransferValue）{if（TransferTitle！='undefined'）{var-ctrlTransfer='MainContent_'+TransferControl；$document.getElementById（ctrlTransfer））.pover({container:'body'，trigger:'hover'，html:true，

我发现有时父元素的样式会干扰popover中的html。只需添加

container:'body'，

即可解决此问题：

函数DisplayTransferValues（TransferControl，TransferTitle，TransferValue）{if（TransferTitle！='undefined'）{var-ctrlTransfer='MainContent\'+TransferControl；$document.getElementById（ctrlTransfer））.popover（{container:'body'，trigger:'hover'，html:true，