单击fancybox查看器下方添加的自定义按钮时未收到单击事件？答案

【问题标题】：Not receiving click event when clicking on custom buttons added beneath fancybox viewer?单击fancybox查看器下方添加的自定义按钮时未收到单击事件？
【发布时间】：2017-11-28 21:20:31
【问题描述】：

我正在使用 fancybox 2。我正在尝试在我在 fancybox 查看器下方添加的自定义按钮上创建一个点击事件：

我将每个图标连接到标题上，如下所示：

    $('.fancybox-photos').fancybox({
        type: 'image',
        beforeShow: function () {

            if (this.title) {
                // New line
                this.title += '<br />';

                // Add Facebook button
                var fullEncodedImageLink = encodeURI($(this.element).data("image-slug"));

                this.title += '<a class="fb-icon-link" target="blank" href=https://www.facebook.com/sharer/sharer.php?u=' + fullEncodedImageLink +'><img class="social-icon-lightbox" src="mysite/third-party/images/custom-fb-icon.png"></a>';

                // Add google plus
                this.title += '<a href=https://plus.google.com/share?url=' + fullEncodedImageLink + ' onclick="javascript:window.open(this.href, "", "menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600");return false;"><img class="social-icon-lightbox" src="mysite/third-party/images/custom-googleplus-icon.png" alt="Share on Google Plus"></a>';

                // Add twitter
                this.title += '<a href=http://www.twitter.com/share?url=' + fullEncodedImageLink + ' target="_blank"><img class="social-icon-lightbox" src="mysite/third-party/images/custom-twitter-icon.png" alt="Share on Twitter"></a>';

                // Add pinterest
                this.title += '<a data-pin-do="buttonBookmark" data-pin-custom="true" data-pin-save="false" href="https://www.pinterest.com/pin/create/button/"><img class="social-icon-lightbox" src="mysite/third-party/images/custom-pinterest-icon.png"/></a>';
            }
        }
    });

如果我尝试执行以下操作，则不会收到点击：

    $('.fb-icon-link').on('click', function(e){
        e.preventDefault();
        console.log('Testing....');
    });

或

    $('.social-icon-lightbox').on('click', function(){
        console.log('Testing....');
    });

我假设这与z-index 有关？我试图在图标中添加一个高 z-index 但没有运气。还有其他想法吗？

【问题讨论】：

顺便说一句，有什么理由不升级到 v3 吗？它具有内置的社交分享模块。

标签： jquery fancybox fancybox-2

【解决方案1】：

最终只需将我的点击事件处理程序添加到fancybox 中的afterShow()：

afterShow: function() {
   // on click code goes in here
}

【讨论】：

【解决方案2】：

您必须使用一些回调（例如afterShow）或使用事件委托（例如$('body').on('click', '.fb-icon-link', function() {});）来绑定点击事件，因为这些元素在启动fancyBox之前并不存在。

【讨论】：