js动态元素绑定事件_jquery、原生js实现动态添加新元素_监听事件

在实现click绑定事件的时候,发现只能对已经加载好的元素进行绑定，如果后来通过js动态插入的元素则无法绑定事件，这里以jquery为例，比如：

<section>
    <p>Click</p>
</section>
<button type="button" >Append A P</button>
<script>
$(document).ready(function(){
     $('p').click(function(){
        console.log('click');
     })    
     $('button').click(function(){
        $('section').append('<p>Click</p>');
    })
})
</script>

除了第一个p元素外，通过button添加的p元素点击时候，在控制台无法打印click。说明监听失败了，那么给如何实现动态元素的事件监听呢？

jquery 1.7版以前使用live动态绑定事件：  

$("p").live("click",function(){
     	console.log('click');
});

jquery 1.7版以后使用on动态绑定事件 : 

$("section").on("click","p", function() {
     console.log('click');
});

如果不是使用jquery，原生的情况呢，例如：

<section>
    <p>Click</p>
</section>
<button type="button" >Append A P</button>
<script>
window.onload=function(){
	var dom=document.getElementsByTagName('p');
	for(var i in dom){
		dom[i].onclick=function(){
			console.log('click');
		}	
	}
	document.getElementsByTagName('button')[0].onclick=function(){
		document.getElementsByTagName('section')[0].insertAdjacentHTML('beforeend','<p>Click</p>');
	}
}
</script>

使用onclick也不能监听到新添加的元素事件，需要如何解决呢？

document.getElementsByTagName('section')[0].onclick=function(ev){
	var ev = ev || window.event;
　　　　var target = ev.target || ev.srcElement;
　　　　if(target.tagName === 'P'){
　　　　　　　  console.log('click');
　　　　}
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_599