Question

我正在使用bootstreap标签。对于标签我正在从远程源获得响应。每次调用远程源时，我都会在每个选项卡上找到长数据内容。我希望远程源只能在第一次调用。

我的链接是http://jsfiddle.net/xrcwrn/xhahLd4h/

$(document).ready(function () {
    $('[data-toggle="tabList"]').click(function (e) {
        var $this = $(this),
            loadurl = $this.attr('href'),
            targ = $this.attr('data-target');
        $.get(loadurl, function (data) {
            $(targ).html(data);
        });
        $this.tab('show');
        return false;
    });
})

如何实现这一点。

Answer 1

第一次加载后，您可以向目标添加一些数据，并对其进行测试：

<强> jsFiddle demo

if (!$(targ).data('loaded')) {
    console.log('The data was not already loaded');
    $.get(loadurl, function (data) {
        // here you "flag" the target to a "loaded" state
        $(targ).html(data).data('loaded', true); 
    });
} else {
    console.log('The data was already loaded');
}

注意：您可能希望在页面加载后点击第一个标签

$('[data-toggle="tabList"]:first').click();

或要在第一个标签上禁用ajax加载，请改用此测试：

if (!$(targ).data('loaded') && $this.parent('li').index() !== 0)

或者如果可以，只需将属性data-loaded添加到第一个目标：

<div class="tab-pane active" id="a" data-loaded="1">

如何避免每次在选项卡中获取远程响应

1 个答案: