Clicking text doesn't show alert

StackOverflow https://stackoverflow.com/questions/21316284

Question

I had a similar question to this before, however, the code I gave was under different circumstances.

Here's what I have now: http://codepen.io/anon/pen/hHbku

If you click on the image and then click on the text "CLICKING THIS SHOULD SHOW THE ALERT", it should show the alert that I've told it to show in the JS code, however it's not. Why is this?

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.");
});
Was it helpful?

Solution

The lightbox script binds click handlers to elements of the lightbox. These handlers stop propagation of the event, so it never reaches the document and your handler isn't called.

OTHER TIPS

To be honest, I'm not too sure how it works, but it works :)

I added a function

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

and this function.

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

maybe will adjust any other function, which is not so much needed.

see here

There was a comma missing after ".lb-caption", and as Jason P said this will also not worked, you have to directly bind to element.

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

see here

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top