jquery - Jquery イベントとセレクターの問題

Question

私はjqueryの初心者なので、質問がうまく定式化されていない場合はご容赦ください。それを定式化する方法について、意味的な手がかりがありません。

ネストされたカルーセル (twitter ブートストラップを使用) を使用して、wordpress Web サイトのコンテンツを表示しています

<div id="outer-carousel" class="carousel slide well" data-interval="false">
    <div class="carousel-inner">

        <div class="item active">
            <div id="nested-carousel1" class="carousel slide well">
                <div class="carousel-inner">
                    <div class="item active">
                        <center>
                        item1
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item2
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item3
                        </center>
                    </div>
                </div>
                <a class="carousel-control left" href="#nested-carousel1" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#nested-carousel1" data-slide="next">&rsaquo;</a>
            </div>
        </div>

        <div class="item">          
            <div id="nested-carousel2" class="carousel slide well">
                <div class="carousel-inner">
                    <div class="item">
                        <center>
                        item4
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item5
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item6
                        </center>
                    </div>
                </div>
                <a class="carousel-control left" href="#nested-carousel2" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#nested-carousel2" data-slide="next">&rsaquo;</a>
            </div>
        </div>

        <div class="item">          
            <div id="nested-carousel3" class="carousel slide well">
                <div class="carousel-inner">
                    <div class="item">
                        <center>
                        item7
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item8
                        </center>
                    </div>
                    <div class="item">
                        <center>
                        item9
                        </center>
                    </div>
                </div>
                <a class="carousel-control left" href="#nested-carousel3" data-slide="prev">&lsaquo;</a>
                <a class="carousel-control right" href="#nested-carousel3" data-slide="next">&rsaquo;</a>
            </div>

        </div>
    </div>
</div>
<ul class="thumbnails">
    <li class="span1">
        <a class="thumbnail" href="#outer-carousel" data-slide-to="0">
            carousel1
        </a>
    </li>
    <li class="span1">
        <a class="thumbnail" href="#outer-carousel" data-slide-to="1">
            carousel2
        </a>
    </li>
    <li class="span1">
        <a class="thumbnail" href="#outer-carousel" data-slide-to="2">
            carousel3
        </a>
    </li>
</ul>

ユーザーがサムネイルをクリックすると、「外側」のカルーセルがスライドを変更します

各スライドは、左右の矢印で操作される「内側」のカルーセルで構成されています。

ただし、「外側」カルーセルをスライドすると、「内側」カルーセルの最初の「アイテム」に「アクティブ」クラスを割り当てる必要があるため、これには問題があります。

良いニュースは次のとおりです。twitter ブートストロップは、スライドを変更するときに「スライド」イベントを提供します。

そのため、最初の「アイテム」のクラスを正しい「内側」カルーセルに設定できました。

    $('#outer-carousel').on('slid', function(e) {    
    // insert class assignment here
});

ここですべての動作を確認してください: http://jsfiddle.net/4hgcY/29/

ただし、私の問題は、「外側の」カルーセルがスライドされたときにのみこれを実行したいということです。しかし、jsfiddleでわかるように、内側のカルーセルをスライドさせることによって発生する「スライド」イベントにより、上記のJqueryも関数を呼び出します...

私は何をすべきか？セレクターを使ってみた

    $('#outer-carousel').on('slid', '#outer-carousel",function(e) {    
    // insert class assignment here
});

しかし、それは機能しません