解决jquery动态创建元素绑定事件失效问题

存在问题
在我们使用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