使用jQuery结合Ajax修改span值时计算失效，如何修复？

问题背景 #

我有一个span#num1元素和输入框#num2，现有代码逻辑如下：

• 页面加载时获取span#num1的文本值
• 输入框#num2按键抬起时执行减法计算并更新span内容
• 同时通过Ajax请求fetch_data.php获取数据，更新#type容器中的span#num1

实际运行时span值无法正常更新，期望效果：

• 在输入框输入20时，span显示980（1,000-20=980）
• 删除输入框中的0后，span显示998（1,000-2=998）

请问需要修改Ajax还是jQuery代码？

核心问题与修改方案 #

问题出在Ajax请求和按键计算的逻辑冲突：Ajax请求会直接覆盖span#num1的值，导致按键计算时要么用了被覆盖后的错误基准值，要么计算结果刚显示就被Ajax冲掉。需要同时调整jQuery事件逻辑和Ajax回调逻辑：

1. 调整jQuery按键事件逻辑 #

把基准值（比如初始的1000）单独存起来，不要依赖随时可能被Ajax修改的span#num1内容，避免计算出错：

// 页面加载时提取并存储原始基准值（去掉千分位逗号）
let baseNum = parseInt($('#num1').text().replace(/,/g, ''));

$('#num2').on('keyup', function() {
  // 处理输入为空的情况，默认按0计算
  let inputVal = parseInt($(this).val()) || 0;
  let result = baseNum - inputVal;
  // 把结果格式化为带千分位的字符串后更新span
  $('#num1').text(result.toLocaleString());
});

2. 调整Ajax请求逻辑 #

如果Ajax是用来更新基准值的，不要直接覆盖span#num1，而是更新存储基准值的变量，再触发计算逻辑刷新span：

$.ajax({
  url: 'fetch_data.php',
  success: function(data) {
    // 假设返回的是新的基准值（比如1200），同样处理千分位
    baseNum = parseInt(data.replace(/,/g, ''));
    // 触发一次按键事件，让计算逻辑自动更新span内容
    $('#num2').trigger('keyup');
  }
});

如果Ajax是更新其他无关内容，那要确保它的操作不会修改span#num1，彻底避免冲突。

总结 #

需要同时修改jQuery按键事件代码和Ajax回调代码：

• 用独立变量存储基准值，切断计算逻辑与span元素的直接依赖
• Ajax更新基准值后同步更新变量，并触发计算逻辑刷新显示

内容的提问来源于stack exchange，提问作者Kyaw Wint Thu