Jquery无法访问Bootstrap Carousel项目

Question

我有一个bootstrap轮播，里面有多个项目。里面的项目有太长的滚动文本，滚动逻辑由jquery处理，问题是只有页面加载显示的项目有滚动文本，而后来的其他项目没有滚动效果，似乎bootstrap carousel阻止jquery运行动画。

问题是为什么动画不会发生在之后加载的项目上？

以下是youtube video链接

以下是使用

的代码

<div class="active item">
    <div class="well">
        <div class="container-flex">
            <div class="row  vertical-align">
                <div class="col-xs-5">
                    <div class="col-xs-12 text-center nopadding">
                        <img class="img-responsive" src="img.png" />
                    </div>
                    <div class="col-xs-12 text-center nopadding fixture-text scrolltext">
                        A LONG TEXT HERE
                    </div>
                </div>
                <div class="col-xs-2 text-center">
                    VS
                </div>
                <div class="col-xs-5">
                    <div class="col-xs-12 text-center nopadding">
                        <img class="img-responsive" src="img.png" />
                    </div>
                    <div class="col-xs-12 text-center nopadding fixture-text scrolltext">
                        A LONG TEXT HERE
                    </div>
                </div>

            </div>
            <div class="row">
                <div class="col-xs-12 fixture-text text-center scrolltext">
                    A long text here
                </div>
            </div>
        </div>
    </div>
</div>

的jQuery

var txt = $('.scrolltext');
if (txt.get(0).scrollWidth > txt.width() || txt.height() > 15) {
    txt.marquee({
        duration: 5000,
        gap: 0,
        delayBeforeStart: 0,
        direction: 'left',
        duplicated: true
    });
}