Julia Julia - 4 months ago 11
jQuery Question

Click event is not firing for button in Lightbox2 caption

I've added a button to Lightbox2 caption:

<a href="link-to-img" data-lightbox="gallery" data-title="
<div class='popup-button-container'>
<button class='order-button'>Order now</button>
</div>"><img src="img.jpg">
</a>


The button is vsible but when I try to make onclick function, it doesn't work:

$(document).on("click", ".order-button", function(e){
e.preventDefault();
console.log('Button clicked');
$('#popup1').bPopup({
speed: 850,
transition: 'slideDown',
modalColor: '#000000',
opacity: 0.5
});
return false;
});


The same code works for any element with class
order-button
outside of lightbox content.

Answer
<a href="link-to-img" data-lightbox="gallery" data-title="
  <div class='popup-button-container'>
    <button class='order-button'>Order now</button>
  </div>"><img src="img.jpg">
</a>

You are writing below code is data-title.

<div class='popup-button-container'>
        <button class='order-button'>Order now</button>
      </div>

Which is being rendered after

$(document).on.

So you should bind the event when lightbox has been rendered i.e title is being rendered

Comments