This question already has answers here:
Is it possible to append to innerHTML without destroying descendants' event listeners?
                                
                                    (13个回答)
                                
                        
                在11个月前关闭。
            
        

我动态创建一个具有EventListener的复选框。不幸的是,如果我使用innerHTML更改复选框标签的文本,EventListener将无法工作:



let label = document.createElement('label'),
    input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));

label.appendChild(input);
document.body.appendChild(label);
label.innerHTML += 'Select Me!';





我该如何解决这个问题,为什么它甚至存在?

这是没有innerHTML的有效代码段:


let label = document.createElement('label'),
    input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));

label.appendChild(input);
document.body.appendChild(label);

最佳答案

连接到元素的innerHTML时,将清除其内容,将现有的HTML字符串与新的字符串连接在一起,然后根据新的HTML字符串重新计算容器的内容。 ~~ Listeners ~~容器中先前附加到元素的元素在序列化过程中无法生存-更改innerHTML之后容器的子代是新的。

附加一个文本节点:



let label = document.createElement('label');
let input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));

label.appendChild(input);
document.body.appendChild(label);
label.appendChild(document.createTextNode('Select Me!'));





或使用insertAdjacentHTML



let label = document.createElement('label');
let input = document.createElement('input');
input.setAttribute('type', 'checkbox');
input.addEventListener('change', () => alert('Change Detected'));

label.appendChild(input);
document.body.appendChild(label);
label.insertAdjacentHTML('beforeend', 'Select Me!');

10-05 20:44
查看更多