从函数创建动态弹出框答案

【问题标题】：Create dynamic popover from function从函数创建动态弹出框
【发布时间】：2016-09-30 21:07:11
【问题描述】：

我正在翻译社交网络，在帖子中我需要显示一些关于每个建议的投票的统计信息（类似于 stackoverflow 中的答案），所以每当用户将鼠标悬停在带有动态的标签上时，我都需要创建弹出框内容。

    function Popx(id)
{
    $(id).popover({//here is my problem, I want dynamic id not static
        html: true,
        trigger: 'hover',
        content: function () {
            return $.ajax({url: 'ajax/ajaxpopoverstat.php?uid=1',
                dataType: 'html',
                async: false}).responseText;
        }
    }).hover(function (e) {
        $(this).popover('toggle');
    });
}

&lt;div class="label label-default" style="background-color: orange; font-size: x-large" data-poload="ajax/ajaxpopoverstat.php" id="xword"  onmouseover="Popx(this.id)"&gt;Suggested Word&lt;/div&gt;

有什么帮助吗？

【问题讨论】：

标签： javascript php jquery html twitter-bootstrap

【解决方案1】：

说明

您正在选择带有 id 变量的 html 标记，而不是使用“#”散列 jquery ID 选择器。

代码

    function Popx(id) {
      // make use of ID selector 
      $('#' + id).popover({
        html: true,
        trigger: 'hover',
        content: function () {
            return $.ajax({url: 'ajax/ajaxpopoverstat.php?uid=1',
                dataType: 'html',
                async: false}).responseText;
        }
      }).hover(function (e) {
        $(this).popover('toggle');
      });
    }

【讨论】：

虽然这解决了我最初的问题，但弹出框的行为很奇怪，无论如何感谢您的好意，非常感谢:)

【解决方案2】：

根据您在弹出框函数中的触发器，我猜您只是希望弹出框对元素做出反应，而您不一定希望它出现在函数中。如果我是正确的，那么this JSFIDDLE example should do exactly what you need

$(document).ready(function(){
    $('div.label').popover({ //here is my problem, I want dynamic id not static
      html: true,
      trigger: 'hover',
      content: function() {
        return "Skittles and ids of: " + $(this)[0].id;
      }
    }).hover(function(e) {
      $(this).popover('toggle');
    });
});

此外，在这个更新的小提琴中，我让您的弹出框正确切换： Updated Fiddle

【讨论】：