如何选择动态创建的按钮?

How can I select a dynamically created button?

提问人:Matthew Abebe 提问时间:2/9/2023 最后编辑:isherwoodMatthew Abebe 更新时间:2/9/2023 访问量:80

问:

我想从使用脚本中的上一个函数创建的列表项中选择一个按钮。当我检查元素时,它显示其类名,但当我控制台元素本身时,它是未定义的。如何选择此元素以将事件侦听器附加到它?感谢您的帮助!

var journalListEl = document.querySelector("#journal-list")
var journalTextInputEl = document.querySelector("#journal-text");
var journalEntryImageURLEl = document.querySelector("#journal-image-url")
var journalImage = document.querySelector("#journal-image")
var journalEntrySubmitButton = document.querySelector("#journal-entry-submit-button")

journalEntryImageURLEl.addEventListener("input", displayJournalPhoto)

function displayJournalPhoto() {
  var journalEntryImageURL = journalEntryImageURLEl.value
  journalImage.setAttribute("src", journalEntryImageURL)
}

journalEntrySubmitButton.addEventListener("click", 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")

  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)
}

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

updateJournalEntryButton.addEventListener("click", handleUpdateJournalEntry)

function handleUpdateJournalEntry() {

  alert("updated journal entry!")
}
JavaScript DOM 遍历

评论

1赞 Barmar 2/9/2023
请将调用代码片段的代码添加到代码片段中。console.log()
0赞 Yogi 2/9/2023
代码中存在多个错误。handleSubmitJournalEntry 的右大括号需要向下移动。querySelector(“.journal-list-entry”) 需要一个 :last-child 选择器,因为可以有多个。请参阅包含更改的示例代码

答:

1赞 Unmitigated 2/9/2023 #1

在最近的静态祖先上使用事件委派。

例如:

journalListEl.addEventListener('click', e => {
    if (e.target.matches('.journal-list-entry')) {
        // handle update journal entry
    }
});

评论

0赞 Matthew Abebe 2/9/2023
感谢您的回答!我能够使用您提供的内容。