私は現在、jQuery と jQuery ui を使用する製品の Web インターフェイスに取り組んでいます。私たちの製品では、上部にタブ ストリップがあります。最後のタブは「新しいタブ」タブであり、ユーザーがそれをクリックすると、ユーザー用の新しいタブが作成されます (最新のほとんどのブラウザーでのタブ ブラウジングとほとんど同じように機能します)。現在、「新しいタブ」タブで選択イベントをキャッチしており、コールバック関数では、新しいタブを作成して表示するすべての作業を行っています。私が遭遇した最初の問題は、新しいタブが選択されていないことです（jQuery uiタブに選択するように指示したにもかかわらず）。何が起こっているかというと、jQuery ui タブが作成した新しいタブを選択するということです。ただし、コールバックの実行が完了すると、jQuery ui は先に進み、「新しいタブ」タブを再選択します。つまり、実行の流れは次のようになります。
- ユーザーが「新しいタブ」タブをクリックする
- 一部の jQuery UI コードが実行されます
- jQuery ui がコールバック関数を呼び出す
- 私のコールバック関数は新しいタブを作成します
- 私のコールバック関数はその新しいタブを選択します
- jQuery UI は、選択効果を「新しいタブ」タブに適用するコードをさらに実行します
現在、コールバック関数を setTimeout 呼び出し内に配置することで、この問題を回避しています。これは、すべての jQuery ui コードが実行された後にコールバック関数が呼び出されるため、機能します。
私の質問は: setTimeout なしで私がやろうとしていることを達成する方法はありますか?
setTimeout を使用して実行の流れを制御するのはハックであり、今後問題が発生する可能性が高いと思います。選択したイベントを探しましたが、役に立ちませんでした。
これが私のコードです：
$tabs.tabs("option", "select", function(event, ui){
if( ui.panel.id === tab_id_prefix + "plus-tab"){
setTimeout( function(){
tab_set_obj.newTab({}).setTabPage({
page: initial_page,
context: initial_context,
title: initial_title,
select: true
});
}, 0);
}
});
編集:正しいタブを選択できます。問題はタイミングの 1 つです。私のコードが現在構造化されている方法では、jQuery UI がすべての作業を完了した後で、目的のタブを選択する必要があります。私は現在 setTimeout を使用してそれを行っていますが、より良い方法があるかどうか疑問に思っていました。
ありがとうございました