jQuery交互问题：错误提示残留&计算后动态更新失效

一、错误提示无法自动消失的修复 #

问题原因 #

原代码中，#inner_diameter的change事件仅在验证不通过时显示错误，验证通过后未添加隐藏错误提示的逻辑；同时change事件仅在输入框失去焦点时触发，用户输入过程中删除非法值时不会触发，导致错误提示无法即时消失。

修复方案 #

1. 在#inner_diameter的验证通过逻辑末尾添加隐藏错误提示的代码；
2. 将change事件替换为input事件，让用户每一次输入（包括删除操作）都触发验证，错误提示能实时响应。

修改后的核心代码片段：

// 替换原inner_diameter事件绑定为input事件
$('#inner_diameter').on('input', function() {
  var $outer_diameter = parseFloat($("#outer_diameter").val());
  var $inner_diameter = parseFloat($("#inner_diameter").val());
  
  // 空值处理：删除输入时隐藏错误和内圆
  if (isNaN($inner_diameter)) {
    $('#error').hide();
    $('.circle2').fadeOut(300);
    return;
  }

  var $converted_2 = (($outer_diameter * 3.75) - (2 * ($inner_diameter * 3.75))).toFixed(3);

  // 各类验证逻辑（保持不变）
  if ($outer_diameter > 85) {
    $("#error").text($outer_diameter + " 过大").show();
    return;
  }
  if ($inner_diameter < 0) {
    $('#error').text('请输入正数').show();
    return;
  }
  if ($inner_diameter >= 0.33 * $outer_diameter) {
    $('#error').text('管壁厚度无效').show();
    return;
  }

  // 验证通过后隐藏错误提示
  $('#error').hide();
  // 后续内圆样式更新逻辑（保持不变）
})

同时建议将#outer_diameter的事件也替换为input，提升交互流畅度。

二、Formidable Forms点击计算后无法动态修改尺寸的修复 #

问题原因 #

Formidable Forms点击「Calculate」按钮后，会重新渲染表单DOM元素（比如替换输入框），而你之前绑定的事件是挂载在旧DOM元素上的，新渲染的输入框没有绑定事件，导致无法触发动态更新逻辑。

修复方案 #

使用事件委托绑定事件，将事件挂载到父元素（如.Calculations）上，这样即使DOM重新渲染，新的输入框也能触发事件；同时可以监听Formidable的专属回调事件frmAfterCalculate，在计算完成后重新初始化图形。

修改后的事件绑定及回调代码：

// 事件委托绑定外径输入事件
$('.Calculations').on('input', '#outer_diameter', function() {
  // 原外径处理逻辑（保持不变）
})

// 事件委托绑定厚度输入事件
$('.Calculations').on('input', '#inner_diameter', function() {
  // 原厚度处理逻辑（保持不变）
})

// Formidable计算完成后重新初始化图形
$(document).on('frmAfterCalculate', function(event, formId, response) {
  var outer = parseFloat($("#outer_diameter").val());
  var inner = parseFloat($("#inner_diameter").val());
  
  // 重新更新外圆
  if (!isNaN(outer)) {
    var converted = (outer * 3.75).toFixed(3);
    $('.circle').css({
      height: (2 * converted),
      width: (2 * converted),
      top: "calc(50% - " + converted + "px)",
      left: "calc(50% - " + converted + "px)"
    }).fadeIn(300);
    $('.circles').css({
      height: (2 * converted) + 10,
      width: (2 * converted) + 10
    });
  }
  
  // 重新更新内圆
  if (!isNaN(inner) && !isNaN(outer)) {
    var converted2 = ((outer * 3.75) - (2 * (inner * 3.75))).toFixed(3);
    $('.circle2').css({
      height: (2 * converted2),
      width: (2 * converted2),
      top: "calc(50% - " + converted2 + "px)",
      left: "calc(50% - " + converted2 + "px)"
    }).fadeIn(300);
  }
  $('#error').hide();
});

完整修改后的JavaScript代码 #

$(function() {
  $('.circle').hide();
  $('.circle2').hide();
  $('#error').hide();

  // 事件委托绑定外径输入事件
  $('.Calculations').on('input', '#outer_diameter', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val());
    
    if (isNaN($outer_diameter)) {
      $('#error').hide();
      $('.circle').fadeOut(300);
      $('.circles').css({height: '', width: ''});
      return;
    }

    var $converted = ($outer_diameter * 3.75).toFixed(3);

    if ($outer_diameter > 85) {
      $("#error").text($outer_diameter + " 过大").show();
      $('.circle').fadeOut(300);
      return;
    }

    if ($outer_diameter < 0) {
      $('#error').text('请输入正数').show();
      $('.circle').fadeOut(300);
      return;
    }

    $('#error').hide();
    console.log($outer_diameter, $converted);
    $('.circle').css({
      height: (2 * $converted),
      width: (2 * $converted),
      top: "calc(50% - " + ($converted) + "px)",
      left: "calc(50% - " + ($converted) + "px)"
    }).fadeIn(300);
    $('.circles').css({
      height: (2 * $converted) + 10,
      width: (2 * $converted) + 10
    });
  })

  // 事件委托绑定厚度输入事件
  $('.Calculations').on('input', '#inner_diameter', function() {
    var $outer_diameter = parseFloat($("#outer_diameter").val());
    var $inner_diameter = parseFloat($("#inner_diameter").val());
    
    if (isNaN($inner_diameter)) {
      $('#error').hide();
      $('.circle2').fadeOut(300);
      return;
    }

    if (isNaN($outer_diameter)) {
      $('#error').text('请先输入外径').show();
      $('.circle2').fadeOut(300);
      return;
    }

    var $converted_2 = (($outer_diameter * 3.75) - (2 * ($inner_diameter * 3.75))).toFixed(3);

    if ($outer_diameter > 85) {
      $("#error").text($outer_diameter + " 过大").show();
      $('.circle2').fadeOut(300);
      return;
    }

    if ($inner_diameter < 0) {
      $('#error').text('请输入正数').show();
      $('.circle2').fadeOut(300);
      return;
    }

    if ($inner_diameter >= 0.33 * $outer_diameter) {
      $('#error').text('管壁厚度无效').show();
      $('.circle2').fadeOut(300);
      return;
    }

    $('#error').hide();
    console.log($inner_diameter, $converted_2);
    $('.circle2').css({
      height: (2 * $converted_2),
      width: (2 * $converted_2),
      top: "calc(50% - " + ($converted_2) + "px)",
      left: "calc(50% - " + ($converted_2) + "px)"
    }).fadeIn(300);
  })

  // Formidable计算完成后重新初始化
  $(document).on('frmAfterCalculate', function(event, formId, response) {
    var outer = parseFloat($("#outer_diameter").val());
    var inner = parseFloat($("#inner_diameter").val());
    
    if (!isNaN(outer)) {
      var converted = (outer * 3.75).toFixed(3);
      $('.circle').css({
        height: (2 * converted),
        width: (2 * converted),
        top: "calc(50% - " + converted + "px)",
        left: "calc(50% - " + converted + "px)"
      }).fadeIn(300);
      $('.circles').css({
        height: (2 * converted) + 10,
        width: (2 * converted) + 10
      });
    }
    
    if (!isNaN(inner) && !isNaN(outer)) {
      var converted2 = ((outer * 3.75) - (2 * (inner * 3.75))).toFixed(3);
      $('.circle2').css({
        height: (2 * converted2),
        width: (2 * converted2),
        top: "calc(50% - " + converted2 + "px)",
        left: "calc(50% - " + converted2 + "px)"
      }).fadeIn(300);
    }
    $('#error').hide();
  });
});

内容的提问来源于stack exchange，提问作者Kaevonz