常常会在写代码的时候碰到一个问题,新建立的DOM节点不能像html中已经写好的节点同样使用已给定的样式,也不能使用已经给定的方法,我总结的几个方法以下:css
1.最基本的解决方式是事件委托,将事件委托给它的父元素,而后在使用target指向目标元素;html
window.onload=function(){node
let ul=document.getElementsByTagName("ul"); jquery
let li=document.getElementsByTagName("li");app
ul.onclick=function(e){this
let evt=e || window.event;htm
let target = evt.target || evt.srcElement;事件
if(target.nodeName == "li"){字符串
alert("11111");get
}
}
}
这样不管是已经给定的 li 仍是动态添加的 li 均可以点击弹出 11111 了。
2.在绑定方法时,直接在动态生成的DOM里添加上onclick方法;
HTML:ul.appendChild( `<li onclick="fun(this)"></li>` ),使用了模板字符串;
JS:function fun(a){
a.style.backgroundColor="red";
}
这样新添加的 li 在点击时背景色会变红;
3.jquery方法:on( ),相似于事件委托,给父元素绑定事件点击子元素触发;
HTML:ul.appendChild( `<li></li>` ).
JS:$("ul").on("click" , "li" , function(){
$("li").css("background","red");
})
这样新添加的 li 在点击时背景色会变红;