Question

我想知道是否有人知道如何解决这个问题。我正在使用jquery ui选项卡，我的每个选项卡都是启用了禁用缓存的ajax。因此，每次选项卡加载时，都应该再次加载所有内容。

这样做但我不喜欢的是首先它在尝试加载新内容时首先显示旧版本。

所以说如果我这样做

点击标签A加载。然后我点击Tab B并加载它。然后我再次点击标签A，我看到了第一次加载。作为用户我想点击选项卡A中的按钮，所以我这样做，但事实是它试图再次加载标签A（因为它没有启用缓存）。因此，当用户单击按钮时，不会发生任何事情，突然之间选项卡将自动刷新，因为它已经完成加载后获得了所有新的ajax请求。

当用户第二次点击Tab A时，他们没有看到旧版本或其他任何内容，直到它完成加载为止。

由于

修改

 $('#tabs').tabs(
            {
                select: function (event, ui)
                {
                    $('#tabs .ui-tabs-hide').children().remove();
                }
            });

Answer 1

您可以查看事件select，如果点击了标签，则会触发该事件。

http://jqueryui.com/demos/tabs/#event-select

在新内容加载时，你应该可以删除旧内容。

您可以尝试这样的事情:(未经测试）

$("#your_tabs_box_id")
  .bind("tabsselect", function(event, ui){
    ui.panel.css('visibility','hidden');
  })
  .bind("tabsload", function(event,ui){
    ui.panel.css('visibility','visible');
  });

Answer 2

select事件和清空ui.panel的组合将会执行此操作。从文档（tabs overview）：

$('#example').bind('tabsselect', function(event, ui) {

    // Objects available in the function context:
    ui.tab     // anchor element of the selected (clicked) tab
    ui.panel   // element, that contains the selected/clicked tab contents
    ui.index   // zero-based index of the selected (clicked) tab

});

这样：

$(document).ready(function(){
    var $tabs = $("#selector").tabs({ select: function(event, ui) {
                                          $(ui.panel).empty();
                                      }
                               });
});

或：

$('#selector').bind('tabsselect', function(event, ui) {
    $(ui.panel).empty();
});

如何在单击时从jquery-ui选项卡中删除旧内容？

2 个答案: