如何选择动态创建的Button并绑定事件监听器？

你当前代码在页面加载完成后就执行了document.querySelector(".journal-list-entry")，但此时提交按钮还未触发，动态列表项和按钮都还没被创建，所以选择器找不到目标元素，返回undefined，无法绑定事件监听器。另外你这里选的是列表项<li>而非编辑按钮，本身也不符合需求。

下面提供两种可行的解决方式：

方案一：创建按钮时直接绑定事件 #

在动态创建按钮的函数handleSubmitJournalEntry里，刚创建完按钮就直接为其绑定事件监听器，这样按钮被添加到DOM时已经带有事件处理逻辑。

修改handleSubmitJournalEntry函数，在创建按钮后添加事件绑定：

function handleSubmitJournalEntry() {
  event.preventDefault()

  var journalEntryListItemEl = document.createElement("li")
  var journalEntryTextEl = document.createElement("p")
  var journalEntryImageEl = document.createElement("img")
  var journalEntryUpdateButton = document.createElement("button")
  var journalEntryDeleteButton = document.createElement("button")

  journalEntryUpdateButton.textContent = "Edit";
  journalEntryDeleteButton.textContent = "Delete";

  journalEntryListItemEl.classList.add("journal-list-entry")
  journalEntryUpdateButton.classList.add("edit-journal-entry")
  journalEntryDeleteButton.classList.add("delete-journal-entry")

  // 新增：直接为按钮绑定事件
  journalEntryUpdateButton.addEventListener("click", handleUpdateJournalEntry)
  journalEntryDeleteButton.addEventListener("click", handleDeleteJournalEntry)

  journalEntryTextEl.innerHTML = journalTextInputEl.value
  var journalEntryImageURL = journalEntryImageURLEl.value
  journalEntryImageEl.setAttribute("src", journalEntryImageURL)

  var newJournalEntryObj = {
    journalText: journalEntryTextEl,
    journalImage: journalEntryImageEl,
    journalImageURL: journalEntryImageURL
  }

  journalEntryListItemEl.appendChild(newJournalEntryObj.journalText)
  journalEntryListItemEl.appendChild(newJournalEntryObj.journalImage)
  journalEntryListItemEl.appendChild(journalEntryUpdateButton)
  journalEntryListItemEl.appendChild(journalEntryDeleteButton)
  journalListEl.appendChild(journalEntryListItemEl)
}

// 新增删除按钮的处理函数示例
function handleDeleteJournalEntry() {
  // 获取当前按钮所在的列表项并删除
  this.parentElement.remove()
  alert("deleted journal entry!")
}

方案二：事件委托（推荐） #

利用事件冒泡机制，给已经存在于DOM中的父元素（比如#journal-list）绑定事件，通过判断点击目标的类名来触发对应逻辑。这种方式无需给每个动态元素单独绑定事件，后续新增的元素也能自动生效。

删除你代码中以下部分：

var updateJournalEntryButton = document.querySelector(".journal-list-entry")

updateJournalEntryButton.addEventListener("click", handleUpdateJournalEntry)

替换为事件委托的代码：

// 给父元素绑定事件
journalListEl.addEventListener("click", function(event) {
  // 判断点击的是编辑按钮
  if (event.target.classList.contains("edit-journal-entry")) {
    handleUpdateJournalEntry(event)
  }
  // 判断点击的是删除按钮
  else if (event.target.classList.contains("delete-journal-entry")) {
    handleDeleteJournalEntry(event)
  }
})

// 修改编辑函数，可通过event获取当前按钮上下文
function handleUpdateJournalEntry(event) {
  // 获取当前按钮所在的列表项
  const currentEntry = event.target.closest(".journal-list-entry")
  // 这里可以添加具体的编辑逻辑，比如获取文本内容等
  alert("updated journal entry!")
}

// 删除按钮的处理函数
function handleDeleteJournalEntry(event) {
  const currentEntry = event.target.closest(".journal-list-entry")
  currentEntry.remove()
  alert("deleted journal entry!")
}

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