Question

我看到当选择一个标签时有三个事件被触发，我看到事件被触发的顺序但是我对使用哪个事件或者这些事件是如何真正不同感到困惑。如果所有这三个都被解雇了，我不能把我的代码放在任何事件中吗？

我必须在这里遗漏一些东西。有人可以澄清吗？

所以在搞砸了这个之后我会分享我最终做的事情，希望它可以帮助别人。

我必须根据Ajax调用中返回的数据生成动态选项卡。它基本上是按日期的数据，其中选项卡是日期，它们显示该日期内的任何数据。

从返回的数据生成选项卡很简单，但我无法弄清楚如何写出相关数据。最后（我应该从这里开始），我看着生成的dom并注意到动态创建的选项卡也创建了一个div。也许这对某些人来说是显而易见的（对我来说不是这样），如果是在文档中我错过了它。无论如何，此代码将从数组生成选项卡，然后在单击选项卡时将html附加到关联的div。我不需要所有变量，但我认为这可能使它更具可读性。 在添加标签之前放置show功能，否则它无效！

var _sessionDates = getSessionDates(sessionData.Sessions);
var $tabs = $("#sub-tabs");
$tabs.tabs({
    show: function(event, ui) { 
        var selected = $tabs.tabs('option', 'selected');
        var _sessionDates = getSessionDates(sessionData.Sessions);
        var grid = buildGrid(_sessionDates[selected]);
        $('#' + _sessionDates[selected]).html(grid);
    }
});

$(_sessionDates).each(function(i, dayOfShow) {
    var d = dateFormat(dayOfShow, "mediumDate");
    $tabs.tabs('add', '#' + dayOfShow, d);
});

最后，我必须“滚动”选项卡中显示的数据，然后我就可以用这两行来完成。第一行给出了对应于所选选项卡的div元素的id（这实际上是重要部分），第二行只调用我的方法并传入div的id而不是'＃'。我的约会也是我的身份。有一个全局变量，我在此之外已经改变了它使它工作。我知道这很糟糕，我会在重构它时删除它。

var $el = $($('#sub-tabs a')[$('#sub-tabs').tabs('option', 'selected')]).attr('href');
$($el).html(buildGrid($el.replace('#', '')));

Answer 1

单击选项卡时会触发

select，但选项卡显示之前

加载远程选项卡的内容后触发
load（即内容不是初始页面有效负载的一部分，但是当用户点击相关内容时通过ajax调用加载的选项卡标签）
在显示标签

后，

show被触发

jQuery documentation使这一点相对清晰，但我必须进行试验才能完全理解select和show之间的区别。

Answer 2

自从提出最初的问题以来，这一点已经变得更加清楚，所以现在满足以下条件：

实际上，“显示”的功能现在由“激活”提供，“选择”由“ beforeActivate”完成，而“加载”仍然相同。

activate ：（以前显示），在之后被激活的标签页（在动画完成之后）触发
beforeActivate ：（以前选择）在标签页激活之前立即触发。
load ：在加载远程标签后触发。

还提供：

beforeLoad ：在beforeActivate事件之后，当即将加载远程选项卡时触发。
create ：创建标签页时触发。

jquery-ui标签中.select，.show和.load之间有什么区别？

2 个答案: