引导工具提示和弹出框发出双重请求答案

【问题标题】：Bootstrap tooltip and popover making double requests引导工具提示和弹出框发出双重请求
【发布时间】：2013-07-24 19:15:54
【问题描述】：

我在 Bootstrap 的弹出窗口中遇到问题，每次处理“显示”时它都会发出 2 个 AJAX 请求。

考虑到这一点，我正在努力使用 AJAX 来填充弹出框，并且每次有 2 个请求并不是我认为的好事。

有没有人有任何想法可以将此减少到 1 个请求？这是 jsFiddle，它显示了与工具提示（popover 扩展）相同的问题。 http://jsfiddle.net/Handyman/NBkKE/1/

HTML：

<div class="container">
<div class="row">
    <div class="span12" id="content">
        <div class="span6">
            <span class="btn btn-primary">item1</span>
        </div>
        <div class="span6">
            <span class="btn btn-primary">item2</span>
        </div>
        <div class="span6">
            <span class="btn btn-primary">item3</span>
        </div>
        <div class="span6">
            <span class="btn btn-primary">item4</span>
        </div>
    </div>
</div>
</div>
<div id="container"></div>

JS：

var $counter = 0;
$('#content').tooltip({
html: true,
trigger: 'hover',
placement: 'bottom',
container: '#container',
title: function()
{
    $.ajax({
        type: 'GET',
        url: '/echo/json/',
        data: {
            item1data: 'some data for item 1',
            item2data: 'some data for item 2'
        },
        success: function($response)
        {
            console.log($response);
        }
    });

    return 'testing' + ($counter++);
}
});

【问题讨论】：

工具提示库内部检查是否有内容，然后显示内容。两个调用（hasContent 和setContent）都会调用你的getTitle 方法。如果您设置断点并检查调用堆栈，您就会明白我在说什么。 jsfiddle.net/ccamarat/tz4qQ 开始使用 Ajax 填充工具提示似乎有点繁重；您可能会考虑以不同的方式填充它。

标签： twitter-bootstrap tooltip popover

【解决方案1】：

所以问题是我对标题和内容都使用了标题。 Popover 有一个单独的内容方法。

因此，一旦我开始正确使用它们，我现在只向服务器发出 1 个请求。

新的 JS：

var $counter = 0;
$('#content').popover({
html: true,
trigger: 'hover',
placement: 'bottom',
container: '#container',
title: function()
{
    return $(this).text();
},
content: function()
{
    $.ajax({
        type: 'GET',
        url: '/echo/json/',
        data: {
            item1data: 'some data for item 1',
            item2data: 'some data for item 2'
        },
        success: function($response)
        {
            console.log($response);
        }
    });

    return 'testing' + ($counter++);
}
});

【讨论】：