jquery cycle caption with event link

Question

I'm using the jquery cycle and it runs fine with the exception of a jquery event not working.

I basically cycle images with captions, I set the captions in the "alt" attribute.

On particular images I call out a modal, assign a class to the image and have a jquery produce a modal - that works fine.

I also add a link within the caption, i can see the link there but when I go to click the link, jquery does not get fired.

Here is an image with this caption and link.

<img class="openModal" src="images/video.jpg" alt="<div class='wrap'><h1 class='caption-title'>Video</h1><p class='caption-desc'>Aliquam lectus orc ac.<a class='button' class='openModal'>watch the video</a></p></div>"/>

the alt tag contains an anchor with the class to call out the modal.

<a class='button' class='openModal'>watch the video</a>

here is the jquery

   $('.openModal').on('click', function (e) {
    console.log('this is the click');
    e.preventDefault();
});

The cycle runs fine.

I click on the image, opens the modal - perfect.

I click on this link within the caption, it doesn't do anything.

What am I missing here?

Why are you putting a snippet of HTML in the alt attribute? It is meant for text only. What do you expect it to do? — tcovo
the original thought was simply list a caption, then it needed to be styled, then a link added. I want to open a modal by clicking on a link within the caption. — jmzDev

Leonardo Santos Leonardo Santos · Accepted Answer · 2013-04-12T01:44:06

It's probably because you're binding the event before the HTML gets inserted on the page.

Try this:

$('.cycleOrCaptionContainer').on('click', '.openModal', function(e) {
    console.log('this is the click');
    e.preventDefault();
});

'.cycleOrCaptionContainer' will be listening for a 'click' from a child element with a class .openModal, even if you append this element after the code runs.

jquery cycle caption with event link

1 Answers