引导轮播内部未触发 jQuery onclick 事件答案

【问题标题】：jQuery onclick event is not triggered inside bootstrap carousel引导轮播内部未触发 jQuery onclick 事件
【发布时间】：2015-10-22 16:17:04
【问题描述】：

我有这个引导轮播，我想在其中的图像上捕获点击事件，以便在单击轮播内的图像时打开自制的灯箱，但是 javascript 代码不会使用此语法触发一些未知的原因：

$('html').on("click", ".lightbox-content img", function () {
  console.log("i'm NOT triggered!");
});

我有以下html代码：

<div class="table-cell lightbox-content">
    <div id="myCarousel1" class="carousel small-carousel slide" data-ride="carousel">
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/office-space1.jpg" style="width:100%" alt="">
            </div>
            <div class="item">
                <img src="images/office-space2.jpg" style="width:100%" alt="">
            </div>
            <div class="item">
                <img src="images/office-space3.jpg" style="width:100%" alt="" />
            </div>
        </div>
        <ol class="carousel-indicators">
            <li data-target="#myCarousel1" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel1" data-slide-to="1"></li>
            <li data-target="#myCarousel1" data-slide-to="2"></li>
        </ol>
    </div>
</div>

我在这里做错了吗？

Bootstrap/jQuery 在网站的其他部分正常工作。我正在使用 jquery-1.11.3.min.js 和 Bootstrap v3.3.5。

【问题讨论】：

试试$(document).on("click", ".lightbox-content img", function () {
@Tushar 应该没什么区别
两者似乎都在工作here。问题中有什么遗漏吗？
@IBadarau 听起来点击事件传播以某种方式停止，首先尝试将事件委托给#myCarousel1级别。顺便说一句，你真的需要委托事件吗？
@A.Wolff 看看 OP, WOT 0_0 的答案

标签： javascript jquery html twitter-bootstrap

【解决方案1】：

试试这个

$('.lightbox-content img').click(function () {
    console.log("i'm NOT triggered!");
});

【讨论】：

【解决方案2】：

把JS改成：

$('.lightbox-content img').click(function () {
  alert("i'm triggered!");
});

检查这支笔： CodePen

【讨论】：

【解决方案3】：

试试这个

   $(document).on("click", ".lightbox-content img", function () {
  console.log("i'm triggered!");
  });

当使用 .on() 时，JQuery 会在您的文档中查找事件。如果您使用 jquery 重新加载分页并且希望 javascript 函数继续运行，这也可以使用

【讨论】：

【解决方案4】：

抱歉误导。这是一个CSS问题。由于某种原因有人放了

z-index: -1;

到 .carousel-inner 类。现在工作正常

【讨论】：

这里值得注意的是添加 complete 和 relevant 代码，如果可能的话，添加现场演示以获得答案。检查minimal reproducible example。