jQuery UI 选项卡选择功能不起作用答案

【问题标题】：jQuery UI Tabs select function not workingjQuery UI 选项卡选择功能不起作用
【发布时间】：2014-03-06 14:14:48
【问题描述】：

我有以下 jquery 用于在我的网站上创建标签（包含在文档准备功能中）：

$('#understanding-water-management').tabs({
    select: function(event, ui) {
        alert('hi');
    }
});

但是，在我的网站上，选择功能不会在标签更改时触发。我创建了一个fiddle，但这正如我所期望的那样工作（它会在标签更改时提醒你好）。

这两个站点之间的唯一区别是，在我自己的网站上，我使用了更轻量级的 jQuery UI，我只下载了 Core、Widget（来自 UI Core）和 Tabs（来自 Widgets）选项。是否需要下载其他选项才能使上面的select 函数正常工作 - 我不想使用完整的 jQuery UI，因为我需要的只是标签，所以想让我的 js 文件尽可能少

【问题讨论】：

你使用的是什么版本的 jQuery UI？

标签： jquery jquery-ui jquery-ui-tabs

【解决方案1】：

jQuery UI 1.10 将select 更改为beforeActivate（如果您希望函数在选择选项卡之前触发）或activate（如果您希望它在选择选项卡后触发）

试试

$('#understanding-water-management').tabs({
    beforeActivate: function(event, ui) {
        alert('hi');
    }
});

【讨论】：

【解决方案2】：

尝试将您的代码包装在 DOM 就绪处理程序 $(function() {...}); 中，以确保在执行您的 jQuery 代码之前正确加载您的所有 DOM 元素：

$(function() {
    $('#understanding-water-management').tabs({
        select: function(event, ui) {
            alert('hi');
        }
    });
});

您的jsFiddle 有效，因为当您包含 jQuery 时，他们默认为您完成了上述部分。

【讨论】：