Question

我有一个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

Answer 1

此问题不在您的代码中，而是来自bootstrap本身。看到这个链接： https://github.com/twbs/bootstrap/issues/12563

所以，你可以固定在你身边。设置一些要检查的标志是弹出显示。

Answer 2

面对问题并使用旗帜解决了问题。如上所述，这是Bootstrap代码中的错误。仅供参考，第一个电话是检查是否进行二次通话。第二个调用是实际渲染发生的时间。

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

＆＃13;

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>';
        }
    }
}

＆＃13;

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

2 个答案: