append - 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'>");

（注意：这里不能写完整的锚标签，但所有属性都在那里）

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

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

问题是加载页面后，当我第一次单击任何锚标记时它不会发生任何事情，但是当我第二次单击任何锚标记时它会起作用。任何人都可以帮助我理解它为什么会发生以及它的解决方案是什么。

Answer 1

有同样的问题。通过手动触发 lightcase 解决了这个问题：

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