Question

之前我遇到过类似的问题，但是我给出的代码是在不同的情况下。

以下是我现在所拥有的：http://codepen.io/anon/pen/hHbku

如果单击图像然后单击文本"CLICKING THIS SHOULD SHOW THE ALERT"，它应该显示我告诉它在JS代码中显示的警报，但事实并非如此。为什么是这样？

HTML：

<html>
  <body>

    <a href="http://lokeshdhakar.com/projects/lightbox2/img/demopage/image-3.jpg" data-lightbox="example-set" title="CLICKING THIS SHOULD SHOW THE ALERT."><img class="example-image" src="http://lokeshdhakar.com/projects/lightbox2/img/demopage/thumb-3.jpg" width="150" height="150"/></a>

    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script src="http://pastebin.com/raw.php?i=udGNfeN8"></script>
  </body>
</html>

JS：

$(document).on("click", ".lb-caption" function() {
  alert("CLICKED.");
});

Answer 1

灯箱脚本将点击处理程序绑定到灯箱的元素。这些处理程序会停止事件的传播，因此它永远不会到达document，并且不会调用您的处理程序。

Answer 2

说实话，我不太确定它是如何工作的，但是它有效：）

我添加了一个功能

  this.$lightbox.find('.lb-caption').on('click', function() {
    alert("CLICKED.");
    return false;
  });

和这个功能。

  this.$overlay.hide().on('click', function() {
    //_this.end();
    alert("...");
    return false;
  });

可能会调整任何其他功能，这不是那么需要。

see here

Answer 3

".lb-caption"后有一个逗号丢失，而 Jason P 表示这也不起作用，你必须直接绑定到元素。

$(".lb-caption").on("click",function(){
  alert("CLICKED.");
});

请参阅here

单击文本不会显示警报

3 个答案: