Question

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

考虑到这一点，我正在努力使用AJAX填充popover并且每次有2个请求不是我想要的好事。

有没有人有任何想法将此归结为1个请求？这是jsFiddle，它显示了与tooltip相同的问题（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++);
}
});

Answer 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++);
}
});

Bootstrap工具提示和弹出窗口发出双重请求

1 个答案: