bootstrap弹出窗口内容更改

Question

我试图根据别处某个div的内容更改bootstrap弹出窗口的数据内容。

在HTML，我酥料饼触发看起来是这样的：

 <div id="box1" 
     class="text-success" data-container="body" 
     data-html="true" 
     data-trigger="click" 
     data-toggle="popover" data-placement="bottom" 
     data-content="Get more info at <a href='http://example.com'>this link</a>."<br> 
     <div id="box1Label" title="Click for more">Another Label</div> 
     </div> 

我把这样的popovers（JQuery的）：

var pop = $('[data-toggle="popover"]'); 
    $(pop).popover(); 
    $(pop).on('click', function (e) { 
    $(pop).not(this).popover('hide'); 
    if ($('#panel2Head').html()== 'XXX') { 
    alert('okay yes panel2Head html is XXX'); 
    popover.options.content = "Test Changed Content"; 
    } 
}); 

警报确认它的阅读＃panel2Head和＃ panel2Head包含“XXX”，但下一行理论上应该将弹出内容从“获取更多信息...”更改为“测试更改的内容”，而不是。

这是我读过的东西之一，例如here。

这个弹出窗口完美地工作，否则他们只是总是将这些内容硬连线到HTML中的数据内容中。

我试过'pop.options.content =“测试更改内容”;'也

如果有人有建议非常感谢。

编辑：

这似乎是时机的问题，那就是，你有它的加载后抢酥料饼的内容。我发现在second answer here的解决方案，经过一些修改，我们用这里面的工作上来：

var pop = $('[data-toggle="popover"]'); 
$(pop).popover(); 
$(pop).on('click', function (e) { 
    $(pop).not(this).popover('hide'); 

}); 
$(pop).on('shown.bs.popover', function(e) { 
    if ($('#panel2Head').html()== 'XXX') { 
     var id = $(e.target).attr('aria-describedby'); 
     $('#'+id).html('<p><b>My New Popover Content</b></p>');   
    } 
}); 

Answer 1

这工作：

$(pop).on('shown.bs.popover', function(e) { 
if ($('#panel2Head').html()== 'XXX') { 
    var id = $(e.target).attr('aria-describedby'); 
    $('#'+id).html('<p><b>My New Popover Content</b></p>');   
    } 
}); 

Answer 2

如果你想改变一些数据，你可以看到https://stackoverflow.com/a/44475697/1622945（带模板选项）。

如果要加载酥料饼的html页面，你可以试试这个：

var hoverTimeout; 

$('[data-toggle="popover"]').hover(function() { 
    var _this = $(this); 

    hoverTimeout = setTimeout(function() { 
     $.ajax({ 
      url: url, 
      type: 'GET', 
      dataType: 'html', 
      success: function(dialog) { 
       if($(".popover:hover").length != 0) { 
        $(".profile").popover("destroy"); 
       } 
       _this.popover({ 
        container: 'body', 
        placement: 'auto', 
        trigger: 'manual', 
        html: true, 
        content: dialog 
       }).on("mouseout", function() { 
        setTimeout(function() { 
         if(!$(".popover:hover").length) { 
          $(".popover").popover("destroy"); 
         } 
        }, 300); 
       }); 
       _this.popover('show'); 
       setTimeout(function() { 
        $('.popover-content').on("mouseleave", function() { 
         $(".popover").popover("destroy"); 
        }); 
       }, 300); 
      }, 
     }); 
    }, 300); 
}, function() { 
    clearTimeout(hoverTimeout); 
});