var btn=document.querySelector('button');
function Mask() {
this.mask=null
this.createMask=function(){
var html="";
html='<div class="mask"></div>';
document.body.innerHTML+=html;
// this.mask=document.querySelector('.mask');
};
}
var obj=new Mask();
btn.onclick=function(){
console.log('a')
obj.createMask();
}
为什么只有第一次点击会执行函数。第二次点击连console.log()也不打印了。。麻烦知道的给回答下。。蟹蟹
来看看 innerHTML 的机理
Removes all of element's children, parses the content string and assigns the resulting nodes as children of the element.
via https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
说明此 button 已经不是原来的 button 了,自然不会响应事件
把onclick函数写进html元素里就可以了
为了方便理解,我把代码写了一下
楼上说的都对,原理参考一楼,解决方案参考二楼.
var btn=document.querySelector('button');
function Mask() {
this.mask=null
this.createMask=function(){
var html="";
html='<div class="mask"></div>';
document.body.innerHTML+=html;
// 每一次改变innerHTML之后,都需要重新获取
btn=document.querySelector('button');
btn.onclick=function(){
console.log('a')
obj.createMask();
}
};
}
var obj=new Mask();
btn.onclick=function(){
console.log('a')
obj.createMask();
}
试试把
btn = document.querySelector('button');放到点击事件函数里
btn.onclick=function(){
btn = document.querySelector('button');
console.log('a');
obj.createMask();
}
mask可以全局就用一个,没必要每次 innerHTML+= 或者 body.appendChild
你得改改:
var btn = document.querySelector('button');
function Mask() {
this.mask = null
this.createMask = function() {
var mask = document.createElement('div');
mask.className = 'mask';
document.body.appendChild(mask);
};
}
var obj = new Mask();
btn.onclick = function() {
console.log('a')
obj.createMask();
};
现在试试看