嘿，我帮你捋捋这个问题哈！你遇到的核心问题是动态生成的日期选择器弹窗里的.ui-icon元素点击事件会冒泡到document，导致弹窗被关闭，而且没法直接给.ui-icon绑事件，只能通过body/html来拦截。你发现直接给body绑事件检查target可行，但委托事件却没生效，下面给你拆解原因和解决方案：

为什么直接绑定body的事件能生效？ #

这种方式的逻辑是事件冒泡到body时，直接检查触发事件的元素（或它的祖先）是不是目标元素，如果是就立刻阻止冒泡，不让事件继续往上传到document。代码示例如下：

原生JS写法 #

document.body.addEventListener('click', function(e) {
  // 用closest确保点击子元素也能匹配到.ui-icon
  if (e.target.closest('.ui-icon')) {
    e.stopPropagation(); // 阻止事件继续冒泡到document
    // 若需要阻止默认行为可加 e.preventDefault();
  }
});

jQuery写法 #

$('body').on('click', function(e) {
  if ($(e.target).closest('.ui-icon').length > 0) {
    e.stopPropagation();
  }
});

这种方式直接在body的事件回调里做判断，没有额外的匹配逻辑，执行时机更直接，不容易被其他因素干扰。

为什么委托事件可能没生效？ #

你之前尝试的body委托事件（比如$('body').on('click', '.ui-icon', ...)）理论上应该可行，但没生效可能是这几个原因：

1. 选择器匹配问题：比如.ui-icon的类名拼写错误，或者点击的是.ui-icon的子元素，而你没考虑到事件冒泡路径的匹配（不过jQuery委托会自动检查路径上的元素，这个概率低）。
2. 事件被提前拦截：如果.ui-icon的父元素已经调用了stopPropagation()，事件根本没冒泡到body，委托回调自然不会触发。
3. jQuery事件封装的小坑：有时候jQuery的e.stopPropagation()可能没完全阻断原生事件冒泡，你可以试试调用原生事件对象：

$('body').on('click', '.ui-icon', function(e) {
  e.originalEvent.stopPropagation(); // 直接操作原生事件
});

更稳妥的替代方案：给弹窗容器绑事件阻止冒泡 #

其实不用单独处理.ui-icon，你可以在动态生成弹窗后，直接给弹窗的容器绑定点击事件，阻止所有内部点击事件冒泡：

// 假设弹窗生成后获取到容器元素
const popupContainer = document.querySelector('.your-popup-container-class');
popupContainer.addEventListener('click', function(e) {
  e.stopPropagation(); // 弹窗内所有点击都不会冒泡到document
});

这种方式更省心，不管弹窗里有多少动态元素，都能一次性解决冒泡问题。

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