lightcase插件在首次单击附加元素时不起作用，但在第二次单击时工作

Question

我正在使用lightcase2.1.0插件，我将一些锚标签附加到ul并调用lightcase函数，如下所示

$('.master_playlist').append("a href='https://www.youtube.com/embed/jt0QvqKVd_o' id='songbtn' data-rel='lightcase:myCollection'>");

(Note: not able to write complete anchor tag here but all attributes are there) 

$(document).on('click','a[data-rel^=lightcase]', function(e) {

    $('a[data-rel^=lightcase]').lightcase();
    e.preventDefault(); 
});

问题是在我第一次点击任何锚标签后加载页面时它没有发生任何事情，但是当我第二次在任何锚标签上点击时它都有效。 任何人都可以帮助我理解它为什么会发生以及它是什么解决方案。

Answer 1

有同样的问题。通过手动触发灯箱来解决这个问题：

$('body').on('click', 'a[data-rel^=lightcase]', function(e) {
    var href = $(this).attr('href');
    lightcase.start({
        href: href
    });
    e.preventDefault();
});