2

をjqueryのUIのタブを選択するとき、私はjQueryのUIのタブを使用している、と私は、私はJSONを読み込むと、タブのコンテンツを生成するためのAPIを使用しtabselectイベント持っtabselectイベントを呼び出します:どのようにプログラムで

$('#tabs').bind('tabsselect', function(event, ui) { 
    if (ui.panel.id == "tab1") { 
    $.getJSON(...) 
    //load content of tab here 
    } 
} 

私はまた、タブのリンクの履歴プラグインを使用しています:

$.address.change(function(event){ 
    $("#tabs").tabs("select" , hash); 
} 

ので、ユーザは#tab1のをマイページに行くならば、TAB1が自動的にロードされます。問題は、tabselectイベントが起動されないため、コンテンツが読み込まれないことです。

私は、ドキュメントが読み込まれた後にすべてが行われることを確認しました。手動でタブに移動すると、タブを使用していないとき(「選択」、...)、うまく動作します。

タブをプログラムでクリックするのではなく、通常のイベントを発生させるために有効にするオプションがありますか?

答えて

4

選択のためのドキュメントによると:

それがクリックされたかのように、タブを選択します。タブが選択されている場合(プログラム的にそれが既にアクティブです

http://jsfiddle.net/andrewwhitaker/UsnNu/1/

興味深いことに、それは発生しません:あなたはこの例で見ることができるよう

この事実で

は、 tabselectイベントハンドラを呼び出すんこの例では、 tab-1をプログラムで選択すると、イベントハンドラは起動されません)。これが問題だろうか?または、 hashに内容が間違っている可能性があります(使用している履歴プラグインの問題)?

申し訳ありませんが、決定的な回答は得られませんでしたが、うまくいけば問題の追跡に役立ちます。

+0

また、あなたがタブ-3を選択した場合に発生し、プログラムタブ-1を選択するためのコードを変更しません。 – Pakman

3

代わりにshowイベントにフックしてみてください。それは私がタブ付きの状態をキャッシュし始めたときに私が同じ問題を抱えていたので私にとってはうまくいった。

$(".selector").bind("tabsshow", function(event, ui) { 
    ... 
}); 

よりここの情報:http://jqueryui.com/demos/tabs/#event-show

関連する問題