0

「タブ追加」ボタンを使用して動的タブを作成しています。

「タブ追加」ボタンがタブの最後に追加され、タブが初期化されます。

$('#tabs').sortable({
    create: function( event, ui ) {
        $tabs = $( '#tabtab' ).tabs({
            create: function(event, ui) {
                $('#tabs').append( '<li id="tab-add" class="noSort"></li>' );
            },
            add: function( event, ui ) { ...

ここに画像の説明を入力

「タブ追加」ボタン (実際には li ) をクリックすると、新しいタブが .tabs( 'add', href, input ) 表記を使用して作成されます。次に、この生成されたタブ li に入力フィールドを挿入します。これにより、新しく作成された li 内のデフォルトで生成されたリンクが削除されます。

ここに画像の説明を入力

<li id="tab-1">
    <input type="text" id="tab-input"></input>
</li>

ここに画像の説明を入力

これは、入力がフォーカスを失ったときに正常に機能し、入力で収集された情報がデータベースにポストされ、正しい li 構文が ID "tab-1" に返されます。

<li id="tab-1">
    <a href="#tabs-1">The Name of My New Tab</a>
</li>

さて、ここで行き詰まります。

正しいタブが選択され (上記を参照)、パネルが表示されますが、既に作成された別のタブをクリックしてから、生成したばかりのタブをクリックしても、タブは選択されません (以下を参照)。「The Name Of My New Tab」タブをクリックしようとしても、選択されません (強調表示されます)。

ここに画像の説明を入力

これは、「tab-1」のコンテンツが動的に生成され、タブ自体が再生成されていないという事実と関係があります。先に進んで別の新しいタブを追加すると、タブは正常に機能し始めます。ページの更新はしたくありません。そのタブが生成された直後に機能するようにしたいだけです。タブの選択、読み込み、有効化を試みましたが、効果はありませんでした。

この動的なアプローチの後にタブを再生成する巧妙な方法はありますか?

この記事が退屈すぎないことを願っています。どんな助けでも大歓迎です。

4

1 に答える 1

2

わかりました。問題は、新しいタブを追加すると、jquery.ui コードが一連のハンドラーをそのタグにアタッチし、それを置き換えていることです。このタグを置き換える代わりに、非表示にしてください。次に、入力がフォーカスを失ったら、jquery.ui によって作成されたテキスト内のテキストを変更して、もう一度表示します。このようにして、jquery.ui によってアタッチされたすべてのハンドラーを保持します。

于 2011-05-04T01:03:42.407 に答える