JQuery中$("body").append()首次点击无效问题解决及原因分析

• 按钮触发的lightbox首次点击无效，核心原因是你在.focosBTN的点击事件里嵌套绑定了第二个同元素的点击事件：第一次点击按钮时，只会执行添加img-popup元素、绑定关闭事件的逻辑，此时负责弹窗显示的fadeIn事件还没绑定到按钮上，所以第一次点击没有显示效果；等第一次点击完成后，第二个点击事件才绑定成功，后续点击就能正常触发显示了。
• 而.lightbox的两个点击事件是在document.ready里平行绑定的，第一次点击时两个事件会依次触发：第一个添加弹窗元素，第二个执行fadeIn，所以功能正常。

把按钮的弹窗显示逻辑直接放到第一次点击的事件里，不要嵌套绑定新的点击事件，同时添加判断避免重复生成弹窗元素：

$(document).ready(function () {
    // BUTTON CLASS
    $(".focosBTN").click(function () {
        // 检查是否已存在弹窗，避免重复添加
        if ($(".img-popup").length === 0) {
            $("body").append("<div class='img-popup'></div>");
            $(".img-popup").click(function () {
                $(this).fadeOut(500, function () {
                    $(this).remove();
                }).addClass("lightboxfadeout");
            });
        }
        // 直接执行弹窗显示逻辑
        $(".img-popup").fadeIn(500);
    });

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

• 新增$(".img-popup").length === 0的判断，防止多次点击生成多个弹窗元素，减少不必要的DOM操作和重复事件绑定。
• 关闭弹窗时用$(this)代替全局选择器，确保只操作当前被点击的弹窗，逻辑更严谨。

内容的提问来源于stack exchange，提问作者Kup