0

我有以下代码应该从选定的 jQuery 选项卡中的跨度中获取文本，但它似乎总是落后于单击。即，如果我单击tab1，它不会显示任何内容，如果我单击tab2，它会显示来自tab1 内span 的文本。tab3 将显示 tab2 的跨度等。

不知道我做错了什么，但这是我目前拥有的代码：

jQuery：

$('[id^="tab"]').live('click', function() {
    alert($("li.ui-tabs-selected span").text())
});

HTML：

<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active" id="tab_group_44">
    <a href="#ui-tabs-2">
        <span>span content 1</span>
    </a>
</li>

<li class="ui-state-default ui-corner-top" id="tab_group_48">
    <a href="#ui-tabs-4">
        <span>span content 2</span>
    </a>
</li>

<li class="ui-state-default ui-corner-top" id="tab_pg_1">
    <a href="#ui-tabs-6">
        <span>span content 3</span>
    </a>
</li>

选项卡代码：

$("#tabs").tabs({
    cache: true,
    ajaxOptions: {
        success: function(){
            $(".column").sortable({
                connectWith: '.column',
                start: function(e, ui){
                    ui.placeholder.height(ui.item.height());
                },
                revert: true,
                opacity: 0.7,
                forcePlaceholderSize: false,
                tolerance: 'pointer',
                handle: '.btnWidgetDarkMove, .btnWidgetLightMove, .btnWidgetBrightMove, .btnWidgetGrayMove, .btnWidgetOtherMove',
                update: function(event, ui) {
                    var that = this;
                    var column = $(this).closest("div").attr("class").split(" ");

                    if( $(that).closest("div").attr("id") !== "column_4" ) {

                        $.ajax({
                            url: '/ajax/save_homepage_widget_order.aspx',
                            type: 'POST',
                            data: { strTab:$("li.ui-tabs-selected").attr("id"), strColumn:column[1], strItems:$(that).sortable('serialize', {key: 'item', attribute: 'class', expression: /(\d+)/}) },
                            error: function(xhr, status, error) {
                                //console.log(xhr.responseText);
                            },
                            success: function() {
                                //should use a return value here to make sure move has been saved
                            }
                        });

                    }

                }
            });


        }
    }
});
4

1 回答 1

2

选项卡选择可能发生在您的点击事件之后，从而导致您体验到的行为。根据您设置选项卡的方式，您可能需要使用选项卡选择事件：

$( '[id^="tab"]' ).bind( "tabsselect", function(event, ui) {
  alert($("li.ui-tabs-selected span").text());
});

您还可以尝试在创建选项卡时初始化选择功能：

...
cache: true,
select: function(event, ui) { 
    alert($("li.ui-tabs-selected span").text());
}

更新：您遇到的问题可能源于 jquery 类设置不正确。而是尝试直接访问选定的选项卡：

var selected = $( "#tabs" ).tabs( "option", "selected" ).children('span');
alert(selected.text());
于 2012-06-27T14:54:46.067 回答