Targeting a class in a custom base template in FancyBox3

Question

I have created a custom base template like so:

 baseTpl : '<div class="fancybox-container" role="dialog" tabindex="-1">' + '<div class="fancybox-bg"></div>' + '<div class="fancybox-inner">' + '<div class="fancybox-infobar">' + '<span data-fancybox-index></span>&nbsp;/&nbsp;<span data-fancybox-count></span>' + '</div>' + '<div class="fancybox-toolbar">{{buttons}}</div>' + '<div class="fancybox-navigation">{{arrows}}</div>' + '<div class="fancybox-stage"></div>' + '<div class="fancybox-social">' + '<button class="sharefb" title="Share FaceBook" data-share="hello"></button>' + '<button class="sharetwt" title="Share Twitter" data-share="hello"></button>' + '</div>' + '</div>' + '</div>', 

How do I target the custom class sharefb? As I want to dynamically change the data-share attribute.

Thank you!

Answer 1

You event needs to be delegated, you will bubble the click event using a parent element, in my case the body:

$('body').on('click','.sharefb',function(){
   $(this).attr('data-share','new value');
});

Answer 2

I found out that I can just do like this inside a fancybox instance inside opts:

afterShow : function( instance, current ) {
    $('.fancybox-social .sharefb').click(function(){
        //add your js here                        
    });