javascript - 在 FancyBox3 的自定义基本模板中定位一个类

Question

我创建了一个自定义基本模板，如下所示：

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>',

如何定位自定义类 sharefb？因为我想动态更改数据共享属性。

谢谢！

Answer 1

您需要委托您的事件，您将使用父元素冒泡点击事件，在我的情况下为主体：

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

Answer 2

我发现我可以在 opts 内的 fancybox 实例中这样做：

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