Custom attribute requiring double click (featherlight lightbox)

Question

So, here is the jsfiddle:

Here is the link to the plugin (featherlight lightbox)

The issue is that using the default targetAttr (which is data-featherlight), it works with only one click.

However, with a custom targetAttr (such as data-single in this example), I have to click twice before the lightbox opens.

Could someone help me out why it is doing it?

Thank you.

Answer 1

$('selector').featherlight() (or using data-featherlight) is for binding, like $('selector').click( function() {...} ).

$.featherlight(...) is for triggering, like $('selector').click()

So, bind on click and trigger, or bind via $('...').featherlight, but don't bind on click and then bind in that handler, like you're doing now.

Answer 2

featherlight() has a build-in click trigger so you just need to call the plugin directly:

jQuery('.something_else').featherlight({
       targetAttr: 'data-single',                  
}); 

see: https://jsfiddle.net/5e9e2k6y/9/