如何使事件侦听器在元素添加到DOM(纯js)后继续工作

你好

我有一位听众:

//close all detail tags when click happens outside
document.addEventListener('click', function(e) {
 if (!details.some(f => f.contains(e.target))) {
   details.forEach(f => f.removeAttribute('open'));
 } else {
   details.forEach(f => !f.contains(e.target) ? f.removeAttribute('open') : '');
 }
})

当你点击一个新标签或者你点击页面上的任何地方时,它会自动关闭所有打开的详细信息标签,这很好。当一个新的细节标签被动态添加时,问题就会出现,监听器将无法为它们工作。我正在阅读其他与委派相关的问题,以及大多数建议委派的问题,但情况似乎并非如此,因为听者应该同时处理普通标记和动态标记。

我尝试了以下建议:

document.addEventListener('click', function(e){
    if(e.target && e.target.id== 'myDynamicallyAddedElementID'){
         //my code
    }
});

但没有变化。你可以在这里测试 https://jsfiddle.net/nxv03wjo/ 这里呢 https://jsfiddle.net/nxv03wjo/1/

这里有什么诀窍?

非常感谢。