how to track events from inside fancybox

Question

I am creating a popup using fancybox. INSIDE the fancybox i have a button i appended. I want something to happen when the user clicks on that button. I was trying the following script:

function openNotification(message) {
   var popup_top = "<div class = 'popup_top'></div>";
   var popup_bottom = "<div class = 'popup_bottom'></div>";
   var closeBtnDiv = '<div class="popupBtnContainer"><button class="popupCloseBtn">Close</button></div>';

   $.fancybox.open({
       padding: 0,
       content: message
   });

   $('.fancybox-skin').prepend(popup_top);
   $('.fancybox-skin').append(popup_bottom);
   $('.fancybox-outer').append(closeBtnDiv);
}

$('.popupCloseBtn').click(function(){
   $.fancybox.close();
});

but it does'nt work. I can see in the Chrome Debugger the event is not even triggered.

Can anyone help please?

Answer 1

Try this

Replace

$('.popupCloseBtn').click(function(){
   $.fancybox.close();
});

With

$('.fancybox-outer').on('click','.popupCloseBtn',function(){
   $.fancybox.close();
});

OR

$(document).on('click','.popupCloseBtn',function(){
   $.fancybox.close();
});