无法通过 jQuery 设置 Bootstrap Popover 选项答案

【问题标题】：Unable to set Bootstrap Popover options via jQuery无法通过 jQuery 设置 Bootstrap Popover 选项
【发布时间】：2016-12-16 08:20:58
【问题描述】：

引导专家：

我只是无法通过 jQuery 设置弹出框标题和内容！几个小时以来，我一直在研究所有其他相关问题——没有骰子。请告诉我我错过了什么！

HTML：

<body class="homepage">
    <p><a id="pop1" data-toggle="popover" class="btn my_popover" href="#" data-container="body" data-html="true" rel="popover" data-trigger="hover" >Popover 1</a>  </p>

<p><a id="pop2" data-toggle="popover" class="btn my_popover" href="#" data-container="body" data-html="true" rel="popover" data-trigger="hover" >Popover 2</a>  </p>

</body>

Javascript（我之前初始化了弹出框。这是我要设置标题和内容的地方）

function my_popover_handler() {
  var fcont_html="";
  var ftitle_html="";
  var fid="";
  $('body').on('mouseenter','.my_popover',function(event) {
    event.preventDefault();
    fid =$(this).attr('id');
    if (fid=="pop1"){
        //Doesn't work
        fcont_html="This is Pop1 content";      
        ftitle_html="Pop1 title bar";
        $('#pop1').popover({title:ftitle_html,content:fcont_html});
        $("#pop1").popover('show');
    } else if (fid=="pop2"){
        //This works
        fcont_html="This is Pop2 content";      
        ftitle_html="Pop2 title bar";
        $('#pop2').attr('data-original-title', ftitle_html);
        $('#pop2').attr('data-content', fcont_html);
        $("#pop2").popover('show');
    }   
}).on(' mouseleave','.fm_feat_popover',function(event) {
    event.preventDefault();
    $("[data-toggle=popover]").popover('hide');
});
}

对于第一个按钮 pop1，我使用了 Bootstrap 文档中的说明

$('#pop1').popover({title:ftitle_html,content:fcont_html});

这不起作用。使用第二个 pop2 ，

$('#pop2').attr('data-original-title', ftitle_html);
$('#pop2').attr('data-content', fcont_html);

它有效。

我的错误是什么？谢谢！

嗯嗯

【问题讨论】：

jsfiddle.net/arunpjohny/49okx20v/1 ?
@ArunPJohny -您是否进行了任何更改以使其正常工作？
@user1072910 检查以下答案是否适合您
@ScanQR - 我添加了 data-original-title 并且它更好一些 - 因为弹出窗口显示为 "My Dummy Title" 。它仍然没有在处理程序中设置为“Pop1 标题栏”。我很困惑 b/c 似乎 Arun 的 jsfiddle（见上文）似乎没有改变。
@user1072910 没什么，只是复制粘贴你的代码

标签： jquery html twitter-bootstrap bootstrap-popover

【解决方案1】：

第一个选项不起作用，因为您缺少相关的data-original-title 属性。

即

<a id="pop1" data-toggle="popover" class="btn my_popover" href="#" data-container="body" data-html="true" rel="popover" data-trigger="hover" >Popover 1</a>

改为添加相关属性试试，

<a id="pop1" data-toggle="popover" data-original-title="Dummy Title" class="btn my_popover" href="#" data-container="body" data-html="true" rel="popover" data-trigger="hover" >Popover 1</a>

【讨论】：