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

Question

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

它确实做到了这一点，但我不喜欢的是它在尝试加载新内容时首先显示旧版本。

所以说如果我这样做

单击选项卡 A，它会加载。然后我单击选项卡 B，它就会加载。然后我再次单击选项卡 A，我会看到第一次加载的内容。作为用户，我想单击选项卡 A 中的按钮，所以我这样做了，但问题是它正在尝试再次加载选项卡 A(因为它没有启用缓存)。因此，当用户单击该按钮时，不会发生任何事情，并且突然该选项卡会自行刷新，因为自完成加载以来它已经收到了所有新的 ajax 请求。

那么有没有办法，当用户第二次单击选项卡 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');
  });