Clicking text doesn't show alert

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.");
});

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.