javascript - jQuery Change() 不会触发

Question

我有一个表单，我正在尝试从中计算一些输入字段。

我已经实现了一项基本检查，但一直失败。

我已将具有触发器的表单部分复制到 jsFiddle 中，我可以让它工作，但它在我的表单中不起作用，我不知道为什么？

https://jsfiddle.net/mfLuw3Lc/5/

然后我尝试用以下方式触发它:

$('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);
  });