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