3

jquery ui タブを使用して動的に追加された div の処理に問題があります。私の目標は、ユーザーが選択したタブに応じてその要素のコンテンツが埋められる div 要素を 1 つだけ持つことです。タブを処理するとき、このライブラリは、リスト内の href が指す ID を持つ div にアクセスできる必要があることがわかりました。したがって、divを追加するには、次のようにselectメソッドを使用しました：

$("#tabs").tabs({
    select: function (event, ui) {
        var choice = ui.tab.href;
        choice = choice.split("/");
        showContent(choice[choice.length - 1]); //choice -> geting a href value of selected   tab (for example: #tab-1)  
    }
});

そして showContent(choice) では、次のようになります。

function showContent(choice) {
    div_id = choice.replace("#", "");
    //set content div like
    $("#content").html("<div id='" + div_id + "'>" + some_content + "</div>");
}

この後、コンテンツという名前の div で適切なコンテンツを取得します (内部の div の id も問題ありません -> 私の例では DOM が含まれています): 

<div id="content"><div id="tab-1">content</div></div>

しかし、javascript コードが新しく作成された div を表示しないようで、タブがエラーで機能しない:「jQuery UI タブ: フラグメント識別子が一致しません」。

JavaScript にこの新しい div 要素を表示させるにはどうすればよいですか?

4

2 に答える 2

0

あなたが探しているのは、JQuery-UIタブのAJAX実装だと思います。

これにより、コンテンツを保存しているページにすべてのタブコンテンツを保存する必要がなくなります。

JQueryUIサイトの例：
JavaScript：

$( "#tabs" ).tabs({
    beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
            ui.panel.html(
                "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                "If this wouldn't be a demo." );
        });
    }
});

HTML：

   <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Preloaded</a></li>
            <li><a href="ajax/content1.html">Tab 1</a></li>
            <li><a href="ajax/content2.html">Tab 2</a></li>
            <li><a href="ajax/content3-slow.php">Tab 3 (slow)</a></li>
            <li><a href="ajax/content4-broken.php">Tab 4 (broken)</a></li>
        </ul>
        <div id="tabs-1">
            <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
        </div>
    </div>
于 2012-11-21T12:58:46.790 に答える