jQuery事件委托：解决动态加载内容点击事件失效问题

$('body, .close').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    // 关闭弹窗的逻辑
    $('#info').html('').removeClass('pop').fadeOut(300);
    $('#pup').children('h1').html('');
    $('#pup').fadeOut(300);
    $('#cov').fadeOut(300);
    console.log('clk');
});

$(staticParentSelector).on(event, dynamicChildSelector, handler);

// 使用事件委托，将点击事件绑定到document，并监听所有匹配 '.close' 选择器的元素
$(document).on('click', '.close', function(e) {
    e.preventDefault();
    e.stopPropagation(); // 阻止事件冒泡和默认行为

    // 关闭弹窗的逻辑
    $('#info').html('').removeClass('pop').fadeOut(300);
    $('#pup').children('h1').html('');
    $('#pup').fadeOut(300);
    $('#cov').fadeOut(300);
    console.log('clk');
});

// 为了处理点击覆盖层关闭弹窗的场景，可以单独为 #cov 绑定事件
$('#cov').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    $('#info').html('').removeClass('pop').fadeOut(300);
    $('#pup').children('h1').html('');
    $('#pup').fadeOut(300);
    $('#cov').fadeOut(300);
    console.log('clk');
});

$('#info').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
});
$('#pup').on('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
});

// 确保jQuery库已加载
// <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(document).ready(function() {
  var cards = $(".smpl");
  cards.each(function(i) {
    var im = $(this).attr('data-im');
    var fadeTime = 180;
    $(this).css('background-image', 'url(_core/img/p/' + im + ')')
    $(this).delay(fadeTime * i).fadeIn(fadeTime);
  });

  // 加载 #info 弹窗内容
  $('.about, .cont').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation(); // 阻止事件冒泡，防止点击 'about'/'contact' 时触发 body 的关闭事件
    var wht = $(this).attr('data-t');
    $('#info').removeClass('pop').html(''); // 清空并移除旧样式
    $('#pup').hide(); // 隐藏其他弹窗
    $('#cov').fadeIn(300); // 显示覆盖层
    $('#info').addClass('pop').html($(wht).html()).fadeIn(300); // 加载内容并显示
    console.log(wht);
  });

  // 使用事件委托处理所有 '.close' 按钮的点击事件
  // 无论 '.close' 是硬编码还是动态加载，都能被正确触发
  $(document).on('click', '.close', function(e) {
    e.preventDefault();
    e.stopPropagation(); // 阻止事件冒泡和默认行为
    // 执行关闭所有弹窗的逻辑
    $('#info').html('').removeClass('pop').fadeOut(300);
    $('#pup').children('h1').html('');
    $('#pup').fadeOut(300);
    $('#cov').fadeOut(300);
    console.log('clk - delegated close');
  });

  // 点击覆盖层 (#cov) 关闭所有弹窗
  $('#cov').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation(); // 阻止事件冒泡
    $('#info').html('').removeClass('pop').fadeOut(300);
    $('#pup').children('h1').html('');
    $('#pup').fadeOut(300);
    $('#cov').fadeOut(300);
    console.log('clk - cov close');
  });

  // 此处原有的 $('#info').on('click') 和 $('#pup').on('click') 已移除
  // 因为它们会阻止事件冒泡，导致委托事件无法触发。

  // 打开 #pup 弹窗
  $('.sp, .ai, .ot').on('click', function(e) {
    e.preventDefault();
    e.stopPropagation();
    var imgsrc = $(this).attr('data-im');
    var longDes = $(this).children('.dspt').attr('data-ld');
    $('#cov').fadeIn(300);
    $('#pup').addClass('pop');
    $('#pup h1').html(longDes);
    $('#pup').css('background-image', 'url(_core/img/p/' + imgsrc + ')').fadeIn(300);
  });
});