注册事件问题
问题描述:
从前有一张表格
广告名称 | 广告内容 | 操作(三个按钮) |
---|---|---|
雪碧 | 透心凉心飞扬 | 删除 新增 取消 |
。。。 | 。。。 | 。。。 |
然后点新增按钮,会出现一个弹框,弹框里有两个按钮
确认新增————-取消
点击确认新增,数据会传送至服务器,然后执行查询函数,将表重新渲染一遍
从前有一段问题代码
$("tbody").on("click","#add",function(){
$("#sureAdd").click(function(){
$.ajax({
...
success:function(){
alert("新增成功!");
}
});
});
})
此时,页面不刷新的情况下,
点击新增一次,表格中新增一条数据,
再次点击新增,表格中新增两条数据,
第三次点击新增,表格中新增三条数据,
以此类推。。。
刚开始始终没发现问题出在哪里,也是我自己原理没有学通
问题原因:
因为
确认新增
事件是放在 新增
事件 里面的,是包含关系,导致每次点击新增事件时,确认新增事件就会注册一次,不管确认新增事件有没有被执行,注册都会存在,点击几次新增,确认新增事件就会注册几次,然后再确认执行的时候,执行注册的次数。
解决办法
将确认新增事件从新增事件中拿出来,页面刷新一次,只注册一次。
$("tbody").on("click","#add",function(){
})
$("#sureAdd").click(function(){
$.ajax({
...
success:function(){
alert("新增成功!");
}
});
});