WordPress中已用preventDefault()，jQuery提交按钮仍刷新页面

云原生阿岚

2026-6-26

WordPress环境下ROI计算器表单提交刷新问题排查与解决

问题现象

编写的jQuery ROI计算代码在本地运行正常，但部署到WordPress后，点击提交按钮页面直接刷新，无法展示计算结果。

核心原因及修复方案

1. jQuery命名冲突（最可能原因）

WordPress默认启用jQuery的noConflict模式，全局$变量会被释放，代码中混用jQuery和$会导致事件绑定失效，event.preventDefault()无法阻止表单默认提交行为。

修复方法：

统一使用jQuery代替所有$；
或者用自执行函数包裹代码，将jQuery映射为$：

(function($) {
  $("#roi").submit(function(event) {
    event.preventDefault();
    // 剩余代码保持不变，可正常使用$
  });
})(jQuery);

2. DOM加载时机问题

如果代码在DOM元素（比如#roi表单）渲染前执行，事件无法绑定到目标元素，表单会按默认行为提交刷新。

修复方法：
将代码包裹在DOM就绪事件中：

jQuery(document).ready(function($) {
  $("#roi").submit(function(event) {
    event.preventDefault();
    // 剩余计算逻辑
  });
});

3. 选择器语法错误

代码中存在错误的选择器写法：比如$("#.manage_risk_1")，正确的类选择器应该是$(".manage_risk_1")（多了多余的#）。虽然这不会直接导致页面刷新，但会导致计算结果无法显示，也需要修正。

完整修正后的代码

HTML

<div class="container">
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2">
      <h1>ROI计算器</h1>
      <p class="lead">填写以下信息计算ROI</p>
      <form id="roi">
        <b>行业类型</b>
        <select id="cost_by_ind">
          <option value="10930000">医疗健康</option>
          <option value="5900000">金融</option>
          <option value="4820000">制药</option>
          <option value="4780000">能源</option>
        </select>
        <b>员工规模成本</b>
        <select id="cost_by_employee_c">
          <option value="3310000">0 - 499人</option>
          <option value="3290000">500 - 1000人</option>
          <option value="4870000">1001 - 5000人</option>
          <option value="4330000">5001 - 10000人</option>
          <option value="5460000">10001 - 25000人</option>
          <option value="5420000">25001 - 100000人</option>
        </select>

        <div class="control-group">
          <b>员工数量</b>
          <input id="no_emp" class="form-control" type="text" placeholder="请输入员工数量">
        </div>
        <div class="control-group">
          <b>月度调查量</b>
          <input id="month_inv" class="form-control" type="text" placeholder="请输入月度调查数量">
        </div>
        <button type="submit" class="btn btn-primary btn-block">计算ROI</button>
      </form>
      <!-- 结果展示区域 -->
      <div class="well" id="output">
        <p>风险管控第1年收益 = <span class="manage_risk_1"></span></p>
        <p>风险管控第2年收益 = <span class="manage_risk_2"></span></p>
        <p>风险管控第3年收益 = <span class="manage_risk_3"></span></p>
        <strong>风险管控总收益 = <span class="results_total"></span></strong>

        <p>分析师赋能第1年收益 = <span class="emp_results_1"></span></p>
        <p>分析师赋能第2年收益 = <span class="emp_results_2"></span></p>
        <p>分析师赋能第3年收益 = <span class="emp_results_3"></span></p>
        <strong>分析师赋能总收益 = <span class="emp_results_total"></span></strong>

        <p>告警量降低第1年收益 = <span class="rav_results_1"></span></p>
        <p>告警量降低第2年收益 = <span class="rav_results_2"></span></p>
        <p>告警量降低第3年收益 = <span class="rav_results_3"></span></p>
        <strong>告警量降低总收益 = <span class="rav_results_total"></span></strong>
      </div>
    </div>
  </div>
</div>

CSS

#output {
  display: none;
  font-size: 26px;
  margin-top: 50px;
}
.help-inline {
  display: none;
}
.result {
  padding-top: 10px;
}
.roi-success {
  background: #269526;
  color: white;
}
.roi-danger {
  background: #d74e26;
  color: white;
}
input[type="text"] {
  width: 100%;
  display: block;
  margin: 15px 0;
}
.btn {
  display: block;
}

JavaScript

jQuery(document).ready(function($) {
  $("#roi").submit(function(event) {
    event.preventDefault();
    
    const cost_by_industry = parseInt($("#cost_by_ind").val());
    const cost_by_employee_count = parseInt($("#cost_by_employee_c").val());
    const no_empoyees = parseInt($("#no_emp").val());
    const month_invest = parseInt($("#month_inv").val());
    const expected_a_grow = 0.05;
    const aas = 120000;
    const fpr = 0.75;
    const avr = 0.75;

    // 风险管控第1年
    const roiCalc = () => ((0.3 * (cost_by_industry + cost_by_employee_count)) / 2) * 0.2;
    const result = roiCalc();
    const formattedPrice1 = result.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    // 风险管控第2年
    const roiCalc2 = () => result * (1 + expected_a_grow);
    const result2 = roiCalc2();
    const formattedPrice2 = result2.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    // 风险管控第3年
    const roiCalc3 = () => result2 * (1 + expected_a_grow);
    const result3 = roiCalc3();
    const formattedPrice3 = result3.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    // 风险管控总收益
    const roiCalcfinal = () => result + result2 + result3;
    const results_total = roiCalcfinal();
    const formattedPrice_total_mr = results_total.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    // 分析师赋能第1年
    const roiCalc_emp_1 = () => (no_empoyees / 2000) * aas;
    const ea_result = roiCalc_emp_1();
    const formattedPrice_ea_1 = ea_result.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    // 分析师赋能第2年
    const roiCalc_emp_2 = () => ea_result * (1 + expected_a_grow);
    const ea_result2 = roiCalc_emp_2();
    const formattedPrice_ea_2 = ea_result2.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    // 分析师赋能第3年
    const roiCalc_emp_3 = () => ea_result2 * (1 + expected_a_grow);
    const ea_result3 = roiCalc_emp_3();
    const formattedPrice_ea_3 = ea_result3.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    // 分析师赋能总收益
    const roiCalc_emp_final = () => ea_result + ea_result2 + ea_result3;
    const emp_results_total = roiCalc_emp_final();
    const formattedPrice_total_ea = emp_results_total.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    // TP第1年
    const tp1 = () => month_invest * (1 - fpr) * 3 * 2 * (aas / 2080) * 12;
    const tp1_results = tp1();

    // FP第1年
    const fp1 = () => month_invest * fpr * 3 * 1 * (aas / 2080) * 12;
    const fp1_results = fp1();

    // TP第2年
    const tp2 = () => month_invest * (1 - avr) * (1 - fpr) * 3 * 1 * (aas / 2080) * 12;
    const tp2_results = tp2();

    // FP第2年
    const fp2 = () => month_invest * (1 - avr) * fpr * 3 * 0.5 * (aas / 2080) * 12;
    const fp2_results = fp2();

    // 告警量降低第1年
    const rav1 = () => tp2_results + fp2_results + tp1_results + fp1_results;
    const rav_results_1 = rav1();
    const formattedPrice_year_rav_1 = rav_results_1.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    // 告警量降低第2年
    const rav2 = () => rav_results_1 * (1 + expected_a_grow);
    const rav_results_2 = rav2();
    const formattedPrice_year_rav_2 = rav_results_2.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    // 告警量降低第3年
    const rav3 = () => rav_results_2 * (1 + expected_a_grow);
    const rav_results_3 = rav3();
    const formattedPrice_year_rav_3 = rav_results_3.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    // 告警量降低总收益
    const rav_total = () => rav_results_1 + rav_results_2 + rav_results_3;
    const rav_results = rav_total();
    const formattedPrice_total_rav = rav_results.toLocaleString("zh-CN", {
      style: "currency",
      currency: "USD"
    });

    $("#output").show();
    $(".manage_risk_1").text(formattedPrice1);
    $(".manage_risk_2").text(formattedPrice2);
    $(".manage_risk_3").text(formattedPrice3);
    $(".results_total").text(formattedPrice_total_mr);
    $(".emp_results_1").text(formattedPrice_ea_1);
    $(".emp_results_2").text(formattedPrice_ea_2);
    $(".emp_results_3").text(formattedPrice_ea_3);
    $(".emp_results_total").text(formattedPrice_total_ea);
    $(".rav_results_1").text(formattedPrice_year_rav_1);
    $(".rav_results_2").text(formattedPrice_year_rav_2);
    $(".rav_results_3").text(formattedPrice_year_rav_3);
    $(".rav_results_total").text(formattedPrice_total_rav);
  });
});

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

WordPress中已用preventDefault()，jQuery提交按钮仍刷新页面

问题现象 #

核心原因及修复方案 #

1. jQuery命名冲突（最可能原因） #

2. DOM加载时机问题 #

3. 选择器语法错误 #

完整修正后的代码 #

HTML #

CSS #

JavaScript #