單擊一下

Question

我有下面的代碼，它應該從選定的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 
          } 
         }); 

        } 

       } 
      }); 


     } 
    } 
}); 

Answer 1

選項卡選擇是probab發生在點擊事件之後，導致您的經驗行爲。取決於你如何設置選項卡，您可能需要使用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());