jQuery change() wont trigger

Question

I have a form that I am trying to calculate some input fields from.

I have implemented a basic check which keeps failing.

I have copied the part of the form that has the trigger into jsFiddle and I can get it to work but it wont work in my form and I have no idea why?

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

I am then trying to trigger it with:

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

But it wont trigger (in my form) - but when in JSfiddle it works fine?

I am at a loss how to debug because the code is so basic

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

Check your updated FIDDLE

Using on() is always recommended when creating triggers on dynamically generated elements.

According to your HTML code, there are 2 ways to do it.

Option 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);
  });

Option 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);
  });