選択した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
}
});
}
}
});
}
}
});