jQuery $.post请求重复执行两次,求助排查原因
为什么我的jQuery $.post请求会执行两次?
这个问题我之前排查过好几个类似的案例,大概率是前端事件绑定或触发的问题,咱们一步步来分析可能的原因和解决办法:
1. 事件被重复绑定了
你的代码是用事件委托给body绑定了keyup事件到.attribuzioneabbonamento元素,如果这段绑定代码被执行了多次——比如脚本被重复引入、或者放在了一个会反复执行的函数(比如ajax回调、弹窗渲染函数)里——就会导致同一个事件被绑定多份,每次按键都会触发多次请求。
解决办法:
绑定前先解绑同名事件,确保每次只绑定一次:
$( "body" ).off( "keyup", ".attribuzioneabbonamento" ).on( "keyup", ".attribuzioneabbonamento", function(){ var AbbonamentoCodice = $(this).val(); var IdRiga = $(this).attr('dd'); if(AbbonamentoCodice.length == 13){ $.post("engine.php", { Action: 'attribuisciabbonamento', Code: AbbonamentoCodice, IdRiga: IdRiga }, function(data, status){ if(status == 'success'){ $('.abbonamentorisposta'+IdRiga).html(data); } }); } });
或者确保这段绑定代码只执行一次(比如放在$(document).ready()里,且脚本只加载一次)。
2. keyup事件被触发了两次
有些场景下,浏览器的自动补全、自定义输入组件的内部逻辑,可能会让keyup事件被触发两次。你可以先加个日志验证:
$( "body" ).on( "keyup", ".attribuzioneabbonamento", function(){ console.log("keyup事件触发次数"); // 原代码内容 });
如果控制台输出两次,那就是事件触发的问题。这种情况推荐改用input事件替代keyup——它只在输入内容实际变化时触发,不会被重复触发:
$( "body" ).on( "input", ".attribuzioneabbonamento", function(){ var AbbonamentoCodice = $(this).val(); var IdRiga = $(this).attr('dd'); if(AbbonamentoCodice.length == 13){ $.post("engine.php", { Action: 'attribuisciabbonamento', Code: AbbonamentoCodice, IdRiga: IdRiga }, function(data, status){ if(status == 'success'){ $('.abbonamentorisposta'+IdRiga).html(data); } }); } });
3. 事件冒泡导致重复触发
如果.attribuzioneabbonamento元素内部还有可聚焦的子元素,keyup事件可能会通过冒泡触发两次。这种情况可以试试阻止事件冒泡:
$( "body" ).on( "keyup", ".attribuzioneabbonamento", function(event){ event.stopPropagation(); // 原代码内容 });
4. 排查后端(概率较低)
虽然你说功能正常,但也可以快速检查下engine.php里有没有重复处理请求的逻辑——不过这种情况很少见,优先排查前端的事件问题。
内容的提问来源于stack exchange,提问作者Nicola Lorenzini
相关产品推荐
相关产品推荐

