点击一下

Question

我有以下代码，它应该从所选jQuery选项卡中的span中获取文本，但它似乎总是只需单击一下即可。即如果我单击tab1，它什么都不显示，如果我单击tab2，它会显示tab1内跨距的文本。 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
                            }
                        });

                    }

                }
            });


        }
    }
});

Answer 1

选项卡选择可能发生在您的点击事件之后，从而导致您的经历行为。根据您设置标签的方式，您可能需要使用tab select event：

$( '[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());