javascript - jquery ui タブと jquery プラグイン - プラグインは一度だけ初期化されます

Question

私は現在、jquery uiタブを使用するサイトに取り組んでおり、各タブでjcarouselを実装しています。最初のタブでは見た目も動作も問題ありませんが、2番目または3番目のタブに切り替えると、jcarouselはありません機能 これはなぜですか？ここに私のコードがあります、

`$("#related").tabs();`
`$('#complimentary-carousel, #similar-carousel, #viewed-carousel').jcarousel({
    scroll : 5,
    visible: 5
});`

HTML は次のようになります。

<div id="related" class="clearfix">
    <ul class="tabs">
        <li><a href="#complimentary">Complimentary</a></li>
        <li><a href="#similar">Similar</a></li>
        <li><a href="#viewed">Recently Viewed</a></li>
    </ul>
    <div id="complimentary">
        <ul id="complimentary-carousel" class="carousel">
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
        </ul>
    </div>
    <div id="similar">
        <ul id="similar-carousel" class="carousel">
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
        </ul>
    </div>
    <div id="viewed">
        <ul id="viewed-carousel" class="carousel">
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;50</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
            <li>
                <a href="">
                    <img src="assets/img/products/mini-radio.png"/>
                    <span class="price">&euro;30</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Answer 1

こちらの問題を参照してください。それを機能させる唯一の方法は、「tabsshow」イベントで jcarousel を初期化することです。非表示のタブで初期化しようとすると、他のプラグインやウィジェットで問題が発生します。