Estaba tratando de crear una caja de luz que se active al hacer clic en un botón. Ya tengo una caja de luz que se activa al hacer clic en un div en el mismo documento. Listo, funciona perfectamente, PERO el del botón no funciona la primera vez que hago clic en él. Entonces, funciona perfectamente. Bueno, no quiero crear una información sobre herramientas que diga "haga clic dos veces la primera vez", entonces, ¿cómo puedo solucionarlo? (Si alguien también puede explicarme por qué sucede esto sería maravilloso)

 $(document).ready(function () { //BUTTON CLASS $(".focosBTN").click(function () { $("body").append("<div class='img-popup'></div>"); $(".img-popup").click(function () { $(".img-popup").fadeOut(500, function () { $(this).remove(); }).addClass("lightboxfadeout"); }); $(".focosBTN").click(function () { $(".img-popup").fadeIn(500); }); }); //DIV CLASS $(".lightbox").click(function () { let imgsrc = $(this).find('.lightboxImg').attr('src'); $("body").append("<div class='img-popup'><img src='" + imgsrc + "'></div>"); $(".img-popup").click(function () { $(".img-popup").fadeOut(500, function () { $(this).remove(); }).addClass("lightboxfadeout"); }); }); $(".lightbox").click(function () { $(".img-popup").fadeIn(500); }); });