如何使用 AddEventListener 定位嵌套模板文字中的元素？

问题描述

我有以下对象数组，例如

const posts = [
  {
    "year": "2021","results": [
      {
        "permalink": "#","title": "15 Types Of Blog Post Titles That Get Clicked","objectID": "e834b4c2819215d5da55fee02702ab51",}
    ]
  },{
    "year": "2020","title": "8 Types of Headlines That Get Clicked","objectID": "5f944e284e1c37db17b862f537db5387",},{
        "permalink": "#","title": "7 Ways Javascript Can Haunt You","objectID": "8d3200b586ca27a3513d7d1b664c5b64","title": "20 New Dark Themes for 2020","objectID": "4d95db97cd03f17e8eb92a6cee65c7a1",{
    "year": "2017","title": "Top 15 Websites to Learn Javascript","objectID": "86cce2025f633287a200699f11bcd230",}
    ]
  }
]

此模板文字使用：

document.querySelector('#page').innerHTML = `
<div>
    ${posts.map(item => `
    <h3>${item.year}<h3>
        ${item.results.map(post => `
            <a id="post-link" data-post-id="${post.objectID}" href="${post.permalink}">
                <h6>${post.title}</h6>
            </a>
        `).join('')}
    `).join('')}
</div>
`

我正在尝试向第二个 AddEventListener 中的链接添加 .map。我将如何定位这些链接？

我尝试了以下不起作用的方法：

const div = document.querySelector('div');

div.addEventListener('click',event => {
    if (event.target.matches('#post-link')) {
      const objectID = event.target.getAttribute('data-post-id');
      alert(objectID);
    }
});

JSFIDDLE

我已阅读有关 Javascript bubbling and capturing 的内容，但不确定如何在这种情况下应用它（如果它完全适用）。

也感谢任何关于我如何更好地编写代码的建议/评论。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）