lightcase plugin doesn't work on first click on appended element but work on second click

Question

I am using lightcase2.1.0 plugin, i appending some anchor tags into ul and calling lightcase function as given below

$('.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(); 
});

The problem is after loading the page when i click first time on any anchor tag it doesn't happen anything but when i click second time on any anchor tag it works. Anybody can help me to understand why it is happening and what is solution of it.

Answer 1

had the same issue. Got around this by manually triggering lightcase:

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