Javascript 第二组动态创建按钮的事件拒绝工作

我编写了一个代码，通过动态创建各种标签的元素，在屏幕上显示食物项目.我将整个过程放在一个名为displayMenuItems的函数中.现在是第一组动态创建的按钮(即"添加btn"按钮)，当我向它们添加事件时，单击时，事件将顺利启动.但是，第二组动态创建的按钮(即"删除btn"按钮)在添加事件时，单击时不会触发事件.当第二组按钮的代码与第一组按钮的代码相似时，我不知道为什么会出现这种复杂情况.你能解决这个问题吗，我会非常感激的？

const menu = [
  {
    id: 1,
    title: "GUNPOWDER GOBHI",
    category: "Small Plates",
    price: 16.99,
    img: "sp1.png",
    desc: `Crispy Cauliflower, Spicy Lentil Dust`,
  },
  {
    id: 2,
    title: "SHRIMP KOLIWADA",
    category: "Small Plates",
    price: 13.99,
    img: "sp2.jpg",
    desc: `Crispy Popcorn Style Fritters, Pickled Mango Sauce`,
  },
  {
    id: 3,
    title: "GHEE ROAST CHICKEN WINGS",
    category: "Small Plates",
    price: 6.99,
    img: "sp3.jpg",
    desc: `Kundapur Chicken Masala`,
  },
]

const sectionCenter = document.querySelector(".section-center");
const listContainer = document.querySelector('.list-container');

window.addEventListener("DOMContentLoaded", function () {
  diplayMenuItems(menu);
});

function diplayMenuItems(menuItems) {
  let displayMenu = menuItems.map(function (item) {

    return `<article class="menu-item">
          <img src=${item.img} alt=${item.title} class="photo" />
          <div class="item-info">
            <h4>${item.title}</h4>
            <h4 class="price">$${item.price}</h4>
            <p class="item-text">
              ${item.desc}
            </p>
            <button class="add-btn" data-title="${item.title}" data-price="$${item.price}">Add To List</button> 
          </div>
        </article>`;
  });
  displayMenu = displayMenu.join("");

  sectionCenter.innerHTML = displayMenu;

  const addBtns = document.querySelectorAll('.add-btn');

addBtns.forEach(function(btn){
btn.addEventListener('click', function(e){
    const title = e.currentTarget.dataset.title;
    const price = e.currentTarget.dataset.price;
    const para = document.createElement('div');
    para.classList.add('item-list');
    para.innerHTML = `<p class="item">${title}</p>
     <p class="item">${price}</p> 
     <button class="delete-btn" data-title="${title}">x</button>`
listContainer.appendChild(para);
});
});

const deleteBtns = document.querySelectorAll('.delete-btn'); 

deleteBtns.forEach(function(btn){
  btn.addEventListener('click', function(e){
      const title = e.currentTarget.dataset.title;
    console.log(title);
    

  });
});
}