我正在嘗試選擇一個元素類“remove-book”，該元素類在運行顯示書籍之后才創建。如何在創建后選擇此洗掉按鈕？這是 github https://github.com/Cluelesshint/library 的鏈接，'displayBooks()' 函式是創建該類的原因..請幫忙！
buttons.forEach((button)=>{
if (button.className === 'new-book'){
button.addEventListener('click', function(){
const input = document.querySelector('.book-input');
openInput(input);
});
}
else if (button.className === 'add-input'){
button.addEventListener('click', addABook);
}
else if (button.className === 'remove-book'){
button.addEventListener('click', doThis);
}
console.table(buttons);
});
uj5u.com熱心網友回復：
嘗試使用事件委托。這個想法很簡單：不是在目標元素上監聽事件，而是在它的祖先元素上監聽事件。如果事件正在發生，瀏覽器將如下作業。
- 瀏覽器檢查所選元素的直接父級是否為冒泡階段注冊了 onclick 事件處理程式，如果是，則運行它。
- 然后它移動到下一個直接祖先元素并執行相同的操作，然后是下一個，依此類推，直到到達該元素。
所以，當元素被點擊時，事件會冒泡到它的祖先元素。它不關心何時以及如何創建元素。
使用事件委托重構您的代碼將類似于以下內容。
document.addEventListener('click', (event) => {
if (event.target.tagName == 'BUTTON') { // make sure the target is a button element
const button = event.target; // this is the button clicked.
const classNames = event.target.classList
if (classNames.contains('new-book')) {
const input = document.querySelector('.book-input');
openInput(input);
} else if (classNames.contains('add-input')) {
button.addEventListener('click', addABook);
} else if (classNames.contains('remove-book')) {
button.addEventListener('click', doThis);
}
}
})
注意：我不確定為什么在單擊按鈕時添加另一個事件偵聽器。這只是一個重構的角度event delegation
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348824.html
標籤：javascript html
上一篇：未捕獲的ReferenceError：未定義PDFObject
下一篇：如何阻止flexbox專案移動？