在 Bootstrap Popover 中调用了两次内容函数答案

【问题标题】：Content function called twice in Bootstrap Popover在 Bootstrap Popover 中调用了两次内容函数
【发布时间】：2017-02-13 11:36:03
【问题描述】：

我有一个加载函数的 Bootstrap Popover，如下所示：

var index = 0;

$('#Button').popover({
    html:true,
    placement:'right',
    content:function(){
      index = index +1;
      return index;
    }
});

而 HTML 只是：

<input id="Button" value='popover' type='button'/>

所以，当我点击按钮时，我应该得到 1、2、3 等...

但是，我得到 2,4,6... 因为它调用了“内容”函数两次。这是为什么？这是一个错误还是我做错了什么？

Here is the fiddle.

【问题讨论】：

这是一个错误，当您将Title 留空时会发生。添加Title，您的内容函数只会被调用一次。

标签： javascript jquery twitter-bootstrap bootstrap-popover

【解决方案1】：

此问题不在您的代码中，而是来自引导程序本身。请参阅此链接： https://github.com/twbs/bootstrap/issues/12563

所以，您可以自行修复它。设置一些标志来检查是否显示弹出框。

【讨论】：

我这里用的不是最新版本（3.3.6）吗？
也许它不修复.. 我说'我认为' :) 用标志尝试这个解决方案......

【解决方案2】：

面对问题并使用标志解决了它。如前所述，这是 Bootstrap 代码中的错误。仅供参考，第一个电话是检查是否拨打第二个电话。第二次调用是在实际渲染发生时。

所以逻辑应该是跳过第一个调用并允许第二个调用。（而不是导致不呈现内容的其他方式）。出于某种原因，第一次调用不应返回 null。然后不进行第二次调用。有了这些，您可以查看下面的代码以获取更多参考。

function popoverHandler(element) {
   
    contentCalled = false; // flag for checking 
    
    element.popover({
        animation: true, 
        container:"body",
        placement: "bottom",
        trigger:"hover",
        "html": true,
        "content": function(){
            var div_id =  "tmp-id-" + $.now();
            return fetchResults(div_id);
        }
    });

    function fetchResults(div_id){
    
        if (!contentCalled) {
            contentCalled = true;
            return " ";
        }
        else {
            $.ajax({
                url         : "getResults",
                type        : "POST",
                data        : <your data>,
                contentType : 'application/json; charset=UTF-8',
                dataType    : 'json',
                success     : function(response){
                                contentCalled = false;
                                // form htmlOutput
                                $('#'+div_id).html(htmlOutput);
                            }
            });
            return '<div id="'+ div_id +'"><img src="assets/img/loading.gif"/> </div>';
        }
    }
}

【讨论】：