每次單擊按鈕時，都會顯示一個復選標記。如果單擊的按鈕未激活，則取消選中標記。此外，當單擊按鈕時，將顯示“加載動態內容”按鈕。加載動態內容時出現問題。加載后，出現復選標記。但洗掉復選標記不起作用。我對動態內容使用嵌套事件偵聽器。當我在加載后檢查控制臺日志時，按鈕類元素沒有改變。我無法弄清楚如何解決這個問題。有什么建議嗎？
const checkMarks = document.querySelectorAll('.ck');
// Nested event delegation
document.querySelector('.parent').addEventListener('click', function(e){
if(e.target.classList.contains('btn-link')){
// Hide checkmark if not active button
checkMarks.forEach(function(check, index){
check.classList.remove('show');
});
// Display checkmark
e.target.closest('div').querySelector('.ck').classList.add('show');
// Display load dynamic button
document.querySelector('.load-content').classList.add('show');
}
});
document.querySelector('.load-content').addEventListener('click', function(){
document.querySelector('.parent').innerHTML = '<div><button >Button 4</button><span >checked</span></div><div><button >Button 5</button><span >checked</span></div><div><button >Button 6</button><span >checked</span></div>'
});.parent{
padding: 30px;
}
.parent .footer{
margin-top: 30px;
margin-bottom: 30px;
display: flex;
}
.btn-link{
display: block;
width: 100px;
padding: 15px;
margin-bottom: 15px;
}
.load-content{
display: none;
padding: 15px;
}
.load-content.show{
display: block;
}
.ck{
display: none;
}
.ck.show{
display: block;
}<div class="parent">
<div><button class="btn-link btn1">Button 1</button><span class="ck">checked</span></div>
<div><button class="btn-link btn2">Button 2</button><span class="ck">checked</span></div>
<div><button class="btn-link btn3">Button 3</button><span class="ck">checked</span></div>
</div>
<div class="load"><button class="load-content">Load dynamic content</button></div><div>jsfiddle
uj5u.com熱心網友回復：
.load-content洗掉/替換代碼中存在的節點并創建新節點的點擊處理程式。但是這些新節點沒有被選中，因為這段代碼：
const checkMarks = document.querySelectorAll('.ck');
僅運行一次并選擇頁面加載時出現的復選標記。嘗試在點擊處理程式中移動這個運算式.parent，看看是否有幫助。
理想情況下，您應該洗掉點擊處理程式.parent內部的.load-content點擊處理程式。這些處理程式仍然存在，這會導致記憶體泄漏。您應該能夠通過將匿名單擊處理程式.parent轉換為命名函式來解決此問題。然后您可以簡單地使用removeEventListenerandaddEventListener洗掉和重新添加處理程式。
uj5u.com熱心網友回復：
根據 MDN：Element 方法 querySelectorAll()回傳一個靜態（非實時） NodeList，表示與指定選擇器組匹配的元素串列。
所以我把它改成了getElementsByClassName，也是回圈程序，從forEach到for回圈，給你。
const checkMarks = document.getElementsByClassName('ck'); // Changed that
// Nested event delegation
document.querySelector('.parent').addEventListener('click', function(e){
if(e.target.classList.contains('btn-link')){
// Hide checkmark if not active button
for(let i = 0; i < checkMarks.length ; i ){ // Also that changed, as forEach doesn't work for getElementsByClassName.
checkMarks[i].classList.remove('show');
};
// Display checkmark
e.target.closest('div').querySelector('.ck').classList.add('show');
// Display load dynamic button
document.querySelector('.load-content').classList.add('show');
}
});
document.querySelector('.load-content').addEventListener('click', function(){
document.querySelector('.parent').innerHTML = '<div><button >Button 4</button><span >checked</span></div><div><button >Button 5</button><span >checked</span></div><div><button >Button 6</button><span >checked</span></div>'
});.parent{
padding: 30px;
}
.parent .footer{
margin-top: 30px;
margin-bottom: 30px;
display: flex;
}
.btn-link{
display: block;
width: 100px;
padding: 15px;
margin-bottom: 15px;
}
.load-content{
display: none;
padding: 15px;
}
.load-content.show{
display: block;
}
.ck{
display: none;
}
.ck.show{
display: block;
}<div class="parent">
<div><button class="btn-link btn1">Button 1</button><span class="ck">checked</span></div>
<div><button class="btn-link btn2">Button 2</button><span class="ck">checked</span></div>
<div><button class="btn-link btn3">Button 3</button><span class="ck">checked</span></div>
</div>
<div class="load"><button class="load-content">Load dynamic content</button></div><div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/416677.html
標籤：