提问人:Matthew Abebe 提问时间:2/9/2023 最后编辑:isherwoodMatthew Abebe 更新时间:2/9/2023 访问量:80
如何选择动态创建的按钮?
How can I select a dynamically created button?
问:
我想从使用脚本中的上一个函数创建的列表项中选择一个按钮。当我检查元素时,它显示其类名,但当我控制台元素本身时,它是未定义的。如何选择此元素以将事件侦听器附加到它?感谢您的帮助!
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!")
}
答:
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
感谢您的回答!我能够使用您提供的内容。
上一个:定位动态创建的子项
评论
console.log()