0

選択したjQueryタブ内のスパンからテキストを取得する必要がある次のコードがありますが、常に1クリック遅れているようです。つまり、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
                            }
                        });

                    }

                }
            });


        }
    }
});
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 に答える