ajax 和bootstrap混用手残出现的一个bug

前端之家收集整理的这篇文章主要介绍了ajax 和bootstrap混用手残出现的一个bug前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前端是这样的


原本的逻辑是点击提交之后,出现模态框,然后点击评论之后用ajax把数据提交给后端,看起来没问题,但是手残把两个按钮嵌套一起了,

代码并不完整)

错误代码

$("#回复按钮").on('click',function(){
 //获得回复对象的信息;
 $("模态框中的评论").on('click' function(){
 //获得弹出框中的绰号和内容
 .ajax({
 传输数据;
 });
 )};
)};

然后问题就来了,我们可以看到这个效果


评论1正常,评论2显示了两次,评论三经测试果然显示了三次

这个问题就出在了两个button on click事件的嵌套上

第一次按下外部的button回复 它开始监听内部的button评论是否被按下,第二次按下外部button,第一次的外部button在监听内部的button被点击的时间,第二次的外部button同样在监听,于是会给服务器post两次数据,以此类推........

解决方案,把两个button的click事件分开写

正确代码

$("#回复按钮").on('click',function(){
//获得回复对象的信息;
)};

$("弹出框中的评论").on('click' function(){
//获得弹出框中的绰号和内容
.ajax({
传输数据;
});

)};

原文链接:https://www.f2er.com/ajax/163516.html

猜你在找的Ajax相关文章