1

我在以编程方式选择选项卡时遇到了一些问题。我的选项卡加载在 Fancybox 对话框窗口中，该窗口在单击链接时启动。基本上，我想在选择选项卡时执行某些操作，并在单击链接时选择特定选项卡。

我正在使用如下select事件初始化 jQuery UI 选项卡：

$('#tabs').tabs({

    select: function(event, ui) {

        // edit: here is the issue
        var activePanel = '.ui-tabs-panel:visible ';

        // grab value of a form input
        var text = $(activePanel + 'someElement').val();

        // check its length
        if ( text.length > 0 ) {
           // do stuff
        }
    }
})

稍后在我的 JS 文件中，我有以下内容：

$(document).on('click', 'a.edit', function() {
    if($category == 'book') {
        // load the tab specific to the 'book' category
        $('#tabs').tabs({ selected: 3 });
    }
})

当我单击a.edit“书”类别中某个项目的链接时，我的控制台会抛出此错误：

Uncaught TypeError: Cannot read property 'length' of undefined

然后，没有在 Fancybox 中加载选项卡，没有任何反应。当我单击不在图书类别中的项目的链接时，不会引发此错误。因此，有两件事非常明显：

  1. 我是n00b
  2. 我的select事件显然被点击事件覆盖，所以text没有设置

我尝试text在我的 JS 文件顶部设置默认值，但这不起作用。那么，我的问题是：

使用选择事件初始化 UI 选项卡的正确方法是什么，同时还能够通过单击事件以编程方式选择选项卡？

或者，更简洁地说，

为什么我得到那个该死的错误？

编辑：我修改了上面的第一个代码块，以包含我发现与我的问题相关的代码。请参阅下面的答案以获得更全面的解释。

4

1 回答 1

1

我发现了问题：我确实是个n00b。

我text根据选项卡是否可见来设置变量。因为我的标签默认是隐藏的，所以从来没有一个可见的面板可以从中获取值。

我通过添加一个简单的检查来解决这个问题，以查看在分配变量之前父元素是否可见：

if ( $('#tab_container').is(':visible') ) {

    // now we can safely set this variable...
    var activePanel = '.ui-tabs-panel:visible ';

    // ...and this will always have a value
    var text = $(activePanel + 'someElement').val();
}
于 2012-05-01T07:00:15.357 回答