Formidable Forms Ajax提交后jQuery动态更新失效问题排查

该问题不属于Formidable Forms本身的缺陷，是自定义JavaScript事件绑定逻辑未兼容Ajax表单重渲染场景导致的。

故障原理 #

你当前的代码在DOM初始加载完成阶段，直接给#outer_diameter、#inner_diameter两个输入框绑定change事件监听器。开启Ajax提交模式后，Formidable Forms会在每次计算/提交请求完成后，重新渲染表单区域的DOM结构：原有绑定了事件的输入框元素会被新的DOM节点替换，原有事件监听器随旧DOM一同被销毁，后续修改输入值时无法触发绑定的更新逻辑，必须刷新页面重新执行初始绑定才能恢复功能。

修复方案 #

优先使用事件委托方案，代码侵入性最低、兼容性最好，无需依赖表单插件的回调逻辑：

修复后完整代码 #

$(function() {
  // 初始化隐藏圆形元素
  $('.circle, .circle2').hide();

  // 事件委托绑定外径输入监听，同时绑定input事件实现输入实时更新
  $(document).on('change input', '#outer_diameter', function() {
    const outer_diameter = parseFloat($("#outer_diameter").val());
    // 增加空值/非法值校验，避免表单重置时计算异常
    if (isNaN(outer_diameter)) {
      $('.circle').hide();
      return;
    }
    const converted = (outer_diameter * 3.75).toFixed(3);

    if (outer_diameter > 85) {
      $("#error").text(`${outer_diameter} is too big`).show();
      $('.circle, .circle2').hide();
      return false;
    }

    if (outer_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      $('.circle, .circle2').hide();
      return false;
    }

    $('.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
    })
    $('#error').hide();
    // 外径变更后主动触发内径计算，保证尺寸同步
    $('#inner_diameter').trigger('change');
  })

  // 事件委托绑定内径/壁厚输入监听
  $(document).on('change input', '#inner_diameter', function() {
    const outer_diameter = parseFloat($("#outer_diameter").val());
    const inner_diameter = parseFloat($("#inner_diameter").val());
    if (isNaN(outer_diameter) || isNaN(inner_diameter)) {
      $('.circle2').hide();
      return;
    }
    const converted_2 = ((outer_diameter * 3.75) - (2 * (inner_diameter * 3.75))).toFixed(3);

    if (outer_diameter > 85) return false;

    if (inner_diameter < 0) {
      $('#error').text('Please input positive integers').show();
      $('.circle2').hide();
      return false;
    }

    if (inner_diameter >= 0.33 * outer_diameter) {
      $('#error').text('Wall Thickness invalid').show();
      $('.circle2').hide();
      return false;
    }

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

  // 监听Formidable表单渲染/翻页/提交完成事件，初始化图形状态
  $(document).on('frmPageChanged frmAfterSubmit frmRenderForm', function() {
    $('#outer_diameter').trigger('change');
  });
});

优化说明 #

• 事件委托将监听器绑定到不会被Ajax刷新替换的document节点上，通过选择器匹配触发事件的元素，即使表单DOM被完全替换，事件监听依然生效
• 新增input事件监听，用户输入过程中即可实时更新图形，无需等待输入框失焦
• 补充了非法值、空值的边界判断，避免表单重置后出现NaN计算异常
• 增加Formidable官方事件监听，每次Ajax完成后主动触发一次计算，保证页面加载、提交后图形和参数自动同步
• 修复原代码中外径修改后内圆尺寸不同步、校验失败时未隐藏异常图形的逻辑漏洞

如果不想使用全局事件委托，也可以将事件绑定逻辑封装为独立函数，在Formidable提供的frmAfterSubmit、frmRenderForm回调中重新执行绑定即可，但是该方案冗余度更高，不推荐。

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