Question

我有一个表单，我试图计算一些输入字段。

我已经实施了基本检查，但仍然失败。

我已经将带有触发器的表单部分复制到了jsFiddle中，我可以让它工作但是它不能在我的表单中工作而且我不知道为什么？

然后我试图用以下方法触发它：

$('li.income_calc_field :input').change(function() {
    alert('triggered');
}

但它不会触发（以我的形式） - 但是在JSfiddle中它可以正常工作吗？

我不知道如何调试因为代码是如此基本

jQuery(document).ready(function($) {

  $('li.income_calc_field :input').change(function() {
    alert('triggered');
    //calculateAnnualIncome();
    var sum = 0;
    $('.income_calc_field :input').each(function() {
      sum += Number($(this).val());
    });
    $('#input_1_68').val(sum * 26);
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul id="gform_fields_1_5" class="gform_fields top_label form_sublabel_below description_below">
  <li id="field_1_59" class="gfield col_left_third side_by_side_radio field_sublabel_below field_description_below">
    <label class="gfield_label">Self: Income (net)*</label>
    <div class="ginput_container ginput_container_radio">
      <ul class="gfield_radio" id="input_1_59">
        <li class="gchoice_1_59_0">
          <input name="input_59" type="radio" value="Fortnightly" checked="checked" id="choice_1_59_0" tabindex="59">
          <label for="choice_1_59_0" id="label_1_59_0">Fortnightly</label>
        </li>
        <li class="gchoice_1_59_1">
          <input name="input_59" type="radio" value="Quarterly" id="choice_1_59_1" tabindex="60">
          <label for="choice_1_59_1" id="label_1_59_1">Quarterly</label>
        </li>
      </ul>
    </div>
  </li>
  <li id="field_1_69" class="gfield col_left_third income_calc_field field_sublabel_below field_description_below">
    <label class="gfield_label" for="input_1_69">Salary</label>
    <div class="ginput_container ginput_container_number">
      <input name="input_69" id="input_1_69" type="text" value="" class="large" tabindex="61" aria-invalid="false">
    </div>
  </li>
  <li id="field_1_74" class="gfield col_left_third income_calc_field field_sublabel_below field_description_below">
    <label class="gfield_label" for="input_1_74">Pension</label>
    <div class="ginput_container ginput_container_number">
      <input name="input_74" id="input_1_74" type="text" value="" class="large" tabindex="62" aria-invalid="false">
    </div>
  </li>
  <li id="field_1_66" class="gfield col_left_third full_width_input hide_label field_sublabel_below field_description_below">
    <label class="gfield_label" for="input_1_66">
		</label>
    <div class="ginput_container ginput_container_text">
      <input name="input_66" id="input_1_66" type="text" value="" class="large" tabindex="63" placeholder="Tell us which pension you receive" aria-invalid="false">
    </div>
  </li>
  <li id="field_1_73" class="gfield col_left_third income_calc_field field_sublabel_below field_description_below">
    <label class="gfield_label" for="input_1_73">Superannuation</label>
    <div class="ginput_container ginput_container_number">
      <input name="input_73" id="input_1_73" type="text" value="" class="large" tabindex="64" aria-invalid="false">
    </div>
  </li>
  <li id="field_1_72" class="gfield col_left_third income_calc_field field_sublabel_below field_description_below">
    <label class="gfield_label" for="input_1_72">Royalties</label>
    <div class="ginput_container ginput_container_number">
      <input name="input_72" id="input_1_72" type="text" value="" class="large" tabindex="65" aria-invalid="false">
    </div>
  </li>
  <li id="field_1_71" class="gfield col_left_third income_calc_field field_sublabel_below field_description_below">
    <label class="gfield_label" for="input_1_71">Interest/Dividends</label>
    <div class="ginput_container ginput_container_number">
      <input name="input_71" id="input_1_71" type="text" value="" class="large" tabindex="66" aria-invalid="false">
    </div>
  </li>
  <li id="field_1_70" class="gfield col_left_third income_calc_field field_sublabel_below field_description_below">
    <label class="gfield_label" for="input_1_70">Other</label>
    <div class="ginput_container ginput_container_number">
      <input name="input_70" id="input_1_70" type="text" value="" class="large" tabindex="67" aria-invalid="false">
    </div>
  </li>
  <li id="field_1_67" class="gfield col_left_third full_width_input hide_label field_sublabel_below field_description_below">
    <label class="gfield_label" for="input_1_67"></label>
    <div class="ginput_container ginput_container_text">
      <input name="input_67" id="input_1_67" type="text" value="" class="large" tabindex="68" placeholder="Detail any other income you received" aria-invalid="false">
    </div>
  </li>
  <li id="field_1_68" class="gfield col_left_third field_sublabel_below field_description_below">
    <label class="gfield_label" for="input_1_68">Total Income</label>
    <div class="ginput_container ginput_container_number">
      <input name="input_68" id="input_1_68" type="text" value="" class="large" tabindex="69" aria-invalid="false">
    </div>
  </li>
</ul>

Answer 1

检查更新的 FIDDLE

在动态生成的元素上创建触发器时，始终建议使用on()。

根据您的HTML代码，有两种方法可以执行此操作。

选项1：

$("#gform_fields_1_5").on('change', '.income_calc_field input', function() {
    alert('triggered');
    //calculateAnnualIncome();
    var sum = 0;
    $('.income_calc_field :input').each(function() {
      sum += Number($(this).val());
    });
    $('#input_1_68').val(sum * 26);
  });

选项2：

$(document).on('change', '.income_calc_field input', function() {
    alert('triggered');
    //calculateAnnualIncome();
    var sum = 0;
    $('.income_calc_field :input').each(function() {
      sum += Number($(this).val());
    });
    $('#input_1_68').val(sum * 26);
  });

jQuery change（）不会触发

1 个答案: