Question

我在使用Bootstrap Carousel时有一些奇怪的行为：

当我单击底部的指示器之一时，它会按所需的顺序转到所需的幻灯片。
当我单击箭头之一向左或向右滑动一张幻灯片时，没有任何反应。

我或多或少地从example in the documentation复制了代码（当然，我删除了真正的链接）：

<div id="productCarousel" class="carousel slide">
    <ol class="carousel-indicators">
        <li data-target="#productCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#productCarousel" data-slide-to="1"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="..." alt="image 1">
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="..." alt="image 2">
        </div>
    </div>
    <a class="carousel-control-prev" href="#productCarousel" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#productCarousel" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

我包含了最新版本的JQuery和Bootstrap。

奇怪的是：当我在href和data-target链接中将carousel-control-prev属性更改为carousel-control-next属性时，它起作用了。

我进行了更多调查，发现当元素具有href属性时，轮播导航的事件处理程序未触发。

处理程序：

$(document).on(Event$2.CLICK_DATA_API, Selector$2.DATA_SLIDE, Carousel._dataApiClickHandler);

或使用常量填充：

$(document).on('click.bs.carousel.data-api', '[data-slide], [data-slide-to]', Carousel._dataApiClickHandler);

（可以在bootstrap.js的1121行找到）

在使用不太具体的事件侦听器进行实验时，我发现即使$(document).on('click', () => console.log('beep'));也不会在这两个元素上触发。它会为页面上的任何其他元素触发。（页面加载完成后，我通过控制台添加了侦听器。）

当然，我只能使用data-target=而不是href=，但我想知道：为什么此代码在文档示例中而不在我的页面上可以工作？

Bootstrap Carousel控件不适用于href目标

0 个答案: