Question

我在网站上运行了一个Twitter Bootstrap轮播。使用Smarty模板生成轮播的代码。我有很多其他的旋转木马使用相同的代码运行，但关于这个的一些事情让我感到悲伤。图像旋转得很好，但是当我点击其中一个推进旋转木马的控件时出现错误。这是我在Firebug中遇到的错误：

TypeError: $active.attr(...) is undefined   
, curId = $active.attr('id').substring(7) (bootstrap.js, line 343)

（Chrome会针对未定义的元素抛出有关未定义子字符串的警告）

如果你没有方便的副本，这里是bootstrap.js的相关部分：

, slide: function (type, next) {
var $active = this.$element.find('.item.active')
, $next = next || $active[type]()
, isCycling = this.interval
, direction = type == 'next' ? 'left' : 'right'
, fallback = type == 'next' ? 'first' : 'last'
, that = this
, e = $.Event('slide', {
relatedTarget: $next[0]
})
, curId = $active.attr('id').substring(7)

似乎导致此错误的最可能原因是.item元素（轮播图像）当前都没有.active。或者活动轮播元素没有ID。但我可以通过观察Firebug中的代码来判断这些事情都没有发生。

如果它有帮助，这里是生成轮播控件的Smarty代码，显示每个元素都有一个ID，并且第一个元素被赋予一个.active类：

<div class="text-control">
            {foreach from=$articles item=article name=artforeach}
                <a {if $article.source|strlen > 7}href="{$article.source}"{else}href="javascript:void(0)"{/if} 
                    {if $smarty.foreach.artforeach.first} class="active"{/if} id="name{$article.id}" 
                    data-target="{$smarty.foreach.artforeach.index}">
                    <h3>{$article.name}</h3>
                    <p>{$article.teaser[0].content|strip_tags|truncate:100:"..."}</p>
                </a>
            {/foreach}
        </div>

有人知道这里会发生什么吗？

Answer 1

经过一整天尝试不同的事情和检查代码，我发现问题与“事件冒泡”的概念有关。虽然.active类，ID和数据目标都应用于a元素，但click事件实际上是由a元素内的h3元素处理的。由于h3没有class .active或ID或数据目标，因此轮播失败了。我想也许它与h3元素的特殊块级状态有关，但如果你在其中放入span元素或i元素，也会发生这种情况。

此代码有效：

<div class="text-control">
            {foreach from=$articles item=article name=artforeach}
                <a {if $article.source|strlen > 7}href="{$article.source}"{else}href="javascript:void(0)"{/if} 
                    {if $smarty.foreach.artforeach.first} class="active"{/if} id="name{$article.id}" 
                    data-target="{$smarty.foreach.artforeach.index}">
                    {$article.name}
                    <p>{$article.teaser[0].content|strip_tags|truncate:100:"..."}</p>
                </a>
            {/foreach}
        </div>

我所做的就是删除h3标签。有趣的是，p标签似乎根本不会影响事件冒泡。只要在元素的开头有纯文本，其他一切似乎都没问题。

Bootstrap轮播控件链接生成错误

1 个答案: