jQuery动态填充弹窗中.close元素点击事件失效问题求助

问题现象 #

• 页面包含两个弹窗：#pup为页面初始化时就存在的硬编码弹窗，#info是点击.about/.cont按钮后，通过jQuery从其他DOM元素中填充内容动态生成的弹窗
• 两个弹窗内都有.close关闭按钮：#pup内的按钮点击可正常触发关闭事件；#info内的按钮点击完全无响应
• 具体场景表现：
  1. 点击图片弹出#pup，点击弹窗外部遮罩#cov或内部.close按钮，均可正常关闭弹窗
  2. 点击头部"about"或"contact"按钮弹出#info，点击外部遮罩#cov可关闭弹窗，但点击内部.close按钮无任何反应

问题根源 #

你当前使用的直接事件绑定$('.close').on('click', ...)，只能对绑定事件时已经存在于DOM树中的元素生效。#info内的.close元素是在点击按钮后才动态插入到页面中的，绑定事件的时候它还不存在，所以无法触发绑定的点击事件。

解决方案 #

使用jQuery的事件委托机制，把点击事件绑定到一个页面初始化时就存在的父级元素（比如body、#cov或者#info本身，因为#info是页面初始就有的容器，只是内容动态替换），由父元素监听子元素的点击事件，这样即使子元素是动态生成的，也能触发事件。

修改后的完整代码 #

// 填充#info弹窗内容
$('.about, .cont').on('click', function(e) {
    e.preventDefault();
    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元素
$('body').on('click', '#cov, .close', function(e) {
    e.preventDefault();
    $('#info').html('').removeClass('pop').fadeOut(300);
    $('#pup').children('h1').html('');
    $('#pup').fadeOut(300);
    $('#cov').fadeOut(300);
    console.log('clk');
});

// 可选：点击弹窗内部区域（非关闭按钮）不触发关闭
$('#pup, #info').on('click', function(e) {
    e.stopPropagation();
});

优化说明 #

• 事件委托的核心是$('父元素').on('事件', '目标子元素选择器', 回调函数)，这样父元素会监听所有匹配子元素的事件，包括动态新增的
• 如果想更精准，可以把父元素的监听范围缩小，只针对#info内的.close，避免全局监听的潜在问题：

$('body').on('click', '#cov, #info .close', function(e) {
    // 关闭逻辑不变
});

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