网站首页 php及前端 解决jquery动态创建元素绑定事件失效问题
解决jquery动态创建元素绑定事件失效问题
编辑时间:2019-05-13 作者:金满斗 浏览量:64 来源:原创
存在问题

在我们使用jquery动态创建元素后往往会遇到一些问题,如:

给.button按钮绑定了点击时间,执行alert:(1);

 

 点击事件代码如下:

<script>
$("#add").click(function(){
	var btn='<input type="button" class="button" value="del" >';
	$("#box").html(btn);
	});
$(".button").click(function(){
	alert(1);
	});
</script>

 


	

 

但在我们动态创建了.button之后,新创建的.button元素并没有点击效果但原来写的.button有点击弹窗事件,这就是问题所在。

 

 

解决办法

我们来解决这个问题,这个问题的关键原因在于:动态生成的元素要通过事件委托来处理。

我们通过事件委托来解决问题:

$("#box").on('click','.button',function(){
	alert(1);
	});

希望我的答案能解决你遇到的问题。


文章转自:https://www.cnblogs.com/nelly0213/p/6183661.html

来说两句吧