在实现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://fly63.com/article/detial/599