javascript - 当在 SELECT 上手动触发更改时会设置值，但从函数内部触发时不会设置值，为什么？

Question

我正在动态构建一些 DOM 元素，正如您在下面的代码片段中看到的那样。思路如下:

• 如果我更改 SELECT 并且我的选择是 Yes/No，则构建一组元素并将它们插入到 DOM 中。
• 如果我点击按钮，那么应该为之前构造的元素动态设置一些值

如果您遵循此路径，一切都会按预期进行。

• 我希望通过单击该按钮，并且因为 load_edit_question 函数正在触发 SELECT 上的更改来获得相同的结果，但如果您单击该按钮，则只有那些结果值未定义。

我在这里缺少什么？

$(document).ready(function() {
  var options = [{
      field_id: 294249,
      field_seq: 36,
      field_type_id: 8,
      form_id: 9926,
      is_base_grid: null,
      option_desc: "Yes",
      option_id: 364371,
      other_required: 0
    }, {
      field_id: 294249,
      field_seq: 36,
      field_type_id: 8,
      form_id: 9926,
      is_base_grid: null,
      option_desc: "No",
      option_id: 364372,
      other_required: 0
    }],
    i = 1,
    k = 1,
    container_yes_no = $("#options_yes_no"),
    field_type = $("#field_type_id"),
    content = '<label>Options</label>\n' +
    '<div id="options_yes_no">\n' +
    '    <div class="row-fluid">\n' +
    '        <div class="span2 text-center"></div>\n' +
    '        <div class=\'span6\'>\n' +
    '            <input type="text"\n' +
    '                   class="options"\n' +
    '                   name="option_desc[]"\n' +
    '                   style="width:98%"\n' +
    '                   value="Yes"\n' +
    '                   data-option_field_id=""\n' +
    '                   data-option_id=""\n' +
    '            />\n' +
    '        </div>\n' +
    '        <div class="span2">\n' +
    '            <label class="checkbox">\n' +
    '                <input type="checkbox" value="1" class="option_other_required" name="other_required[]"/> Other\n' +
    '            </label>\n' +
    '        </div>\n' +
    '        <div class="span2">\n' +
    '            <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>\n' +
    '            <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>\n' +
    '        </div>\n' +
    '    </div>\n' +
    '    <div class="row-fluid">\n' +
    '        <div class="span2 text-center"></div>\n' +
    '        <div class=\'span6\'>\n' +
    '            <input type="text"\n' +
    '                   class="options"\n' +
    '                   name="option_desc[]"\n' +
    '                   style="width:98%"\n' +
    '                   value="No"\n' +
    '                   data-option_field_id=""\n' +
    '                   data-option_id=""\n' +
    '            />\n' +
    '        </div>\n' +
    '        <div class="span2">\n' +
    '            <label class="checkbox">\n' +
    '                <input type="checkbox" value="1" class="option_other_required" name="other_required[]"/> Other\n' +
    '            </label>\n' +
    '        </div>\n' +
    '        <div class="span2">\n' +
    '            <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>\n' +
    '            <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>\n' +
    '        </div>\n' +
    '    </div>\n' +
    '</div>\n';

  field_type.change(function() {
    var field_type_id = $(this).find('option:selected'),
      field_type_name = field_type_id.data('alias');

    switch (field_type_name) {
      case 'yes_no':
        container_yes_no.html(content);
        var i = 1,
          k = 1;

        container_yes_no.find(":text").each(function() {
          $(this).attr("id", "option_desc_" + i);
          console.log("option_desc_" + i);
          i++;
        });

        container_yes_no.find(":checkbox").each(function() {
          $(this).attr("id", "option_other_" + k);
          k++;
        });

        break;
      default:
        console.log(field_type_name);
        break;
    }
  }).trigger('change');

  $("#me").on("click", function() {
    load_edit_question(field_type, options);
  });
});

function load_edit_question(select_el, options) {
  select_el.trigger('change');
  loadq(options);
}

function loadq(options) {
  console.log(options);

  for (var i = 0; i < options.length; i++) {
    var option = options[i],
      curr_opt_desc = $("#option_desc_" + (i + 1)),
      curr_option_other = $("#option_other_" + (i + 1)),
      fullId = option.field_id + '_' + option.option_id;

    curr_opt_desc.val(option.option_desc);
    curr_option_other.prop('checked', option.other_required === 1);
    curr_opt_desc.data("option_id", option.option_id);
    curr_opt_desc.data("option_field_id", option.field_id);

    console.log(fullId);
    console.log(curr_opt_desc.val());
    console.log(curr_opt_desc.data("option_id"));
    console.log(curr_opt_desc.data("option_field_id"));
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Options</label>
<div id="options_yes_no">
  <div class="row-fluid">
    <div class="span2 text-center"></div>
    <div class='span6'>
      <input type="text" class="options" name="option_desc[]" style="width:98%" value="Yes" data-option_field_id="" data-option_id="" />
    </div>
    <div class="span2">
      <label class="checkbox">
        <input type="checkbox" value="1" class="option_other_required" name="other_required[]" /> Other
      </label>
    </div>
    <div class="span2">
      <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>
      <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span2 text-center"></div>
    <div class='span6'>
      <input type="text" class="options" name="option_desc[]" style="width:98%" value="No" data-option_field_id="" data-option_id="" />
    </div>
    <div class="span2">
      <label class="checkbox">
        <input type="checkbox" value="1" class="option_other_required" name="other_required[]" /> Other
      </label>
    </div>
    <div class="span2">
      <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>
      <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>
    </div>
  </div>
</div>

<select id="field_type_id" name="field_type_id" class="span12">
    <option value="">Select One</option>
    <option value="2" data-alias="checkbox">Checkbox</option>
    <option value="3" data-alias="date">Date</option>
    <option value="5" data-alias="fixed_text">Fixed Text</option>
    <option value="1" data-alias="radio">Radio</option>
    <option value="4" data-alias="text">Text</option>
    <option value="6" data-alias="textarea">Textarea</option>
    <option value="8" data-alias="yes_no">Yes/No</option>
</select>

<button id="me"> Click me</button>

PS:如果代码片段无法正常工作，我也设置了一个 fiddle here

Answer 1

当您单击按钮时，您在触发事件之前没有设置值，这将使所选选项留空，然后在开关操作中运行默认例程。因此，实际上没有设置任何输入值，并且在尝试打印它们时未定义。

$(document).ready(function() {
  var options = [{
      field_id: 294249,
      field_seq: 36,
      field_type_id: 8,
      form_id: 9926,
      is_base_grid: null,
      option_desc: "Yes",
      option_id: 364371,
      other_required: 0
    }, {
      field_id: 294249,
      field_seq: 36,
      field_type_id: 8,
      form_id: 9926,
      is_base_grid: null,
      option_desc: "No",
      option_id: 364372,
      other_required: 0
    }],
    i = 1,
    k = 1,
    container_yes_no = $("#options_yes_no"),
    field_type = $("#field_type_id"),
    content = '<label>Options</label>\n' +
    '<div id="options_yes_no">\n' +
    '    <div class="row-fluid">\n' +
    '        <div class="span2 text-center"></div>\n' +
    '        <div class=\'span6\'>\n' +
    '            <input type="text"\n' +
    '                   class="options"\n' +
    '                   name="option_desc[]"\n' +
    '                   style="width:98%"\n' +
    '                   value="Yes"\n' +
    '                   data-option_field_id=""\n' +
    '                   data-option_id=""\n' +
    '            />\n' +
    '        </div>\n' +
    '        <div class="span2">\n' +
    '            <label class="checkbox">\n' +
    '                <input type="checkbox" value="1" class="option_other_required" name="other_required[]"/> Other\n' +
    '            </label>\n' +
    '        </div>\n' +
    '        <div class="span2">\n' +
    '            <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>\n' +
    '            <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>\n' +
    '        </div>\n' +
    '    </div>\n' +
    '    <div class="row-fluid">\n' +
    '        <div class="span2 text-center"></div>\n' +
    '        <div class=\'span6\'>\n' +
    '            <input type="text"\n' +
    '                   class="options"\n' +
    '                   name="option_desc[]"\n' +
    '                   style="width:98%"\n' +
    '                   value="No"\n' +
    '                   data-option_field_id=""\n' +
    '                   data-option_id=""\n' +
    '            />\n' +
    '        </div>\n' +
    '        <div class="span2">\n' +
    '            <label class="checkbox">\n' +
    '                <input type="checkbox" value="1" class="option_other_required" name="other_required[]"/> Other\n' +
    '            </label>\n' +
    '        </div>\n' +
    '        <div class="span2">\n' +
    '            <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>\n' +
    '            <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>\n' +
    '        </div>\n' +
    '    </div>\n' +
    '</div>\n';

  field_type.change(function() {
    var field_type_id = $(this).find('option:selected'),
      field_type_name = field_type_id.data('alias');

    switch (field_type_name) {
      case 'yes_no':
        container_yes_no.html(content);
        var i = 1,
          k = 1;

        container_yes_no.find(":text").each(function() {
          $(this).attr("id", "option_desc_" + i);
          console.log("option_desc_" + i);
          i++;
        });

        container_yes_no.find(":checkbox").each(function() {
          $(this).attr("id", "option_other_" + k);
          k++;
        });

        break;
      default:
        console.log(field_type_name);
        break;
    }
  }).trigger('change');

  $("#me").on("click", function() {
    load_edit_question(field_type, options);
  });
});

function load_edit_question(select_el, options) {
  select_el.val('8').trigger('change');
  loadq(options);
}

function loadq(options) {
  console.log(options);

  for (var i = 0; i < options.length; i++) {
    var option = options[i],
      curr_opt_desc = $("#option_desc_" + (i + 1)),
      curr_option_other = $("#option_other_" + (i + 1)),
      fullId = option.field_id + '_' + option.option_id;

    curr_opt_desc.val(option.option_desc);
    curr_option_other.prop('checked', option.other_required === 1);
    curr_opt_desc.data("option_id", option.option_id);
    curr_opt_desc.data("option_field_id", option.field_id);

    console.log(fullId);
    console.log(curr_opt_desc.val());
    console.log(curr_opt_desc.data("option_id"));
    console.log(curr_opt_desc.data("option_field_id"));
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Options</label>
<div id="options_yes_no">
  <div class="row-fluid">
    <div class="span2 text-center"></div>
    <div class='span6'>
      <input type="text" class="options" name="option_desc[]" style="width:98%" value="Yes" data-option_field_id="" data-option_id="" />
    </div>
    <div class="span2">
      <label class="checkbox">
        <input type="checkbox" value="1" class="option_other_required" name="other_required[]" /> Other
      </label>
    </div>
    <div class="span2">
      <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>
      <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>
    </div>
  </div>
  <div class="row-fluid">
    <div class="span2 text-center"></div>
    <div class='span6'>
      <input type="text" class="options" name="option_desc[]" style="width:98%" value="No" data-option_field_id="" data-option_id="" />
    </div>
    <div class="span2">
      <label class="checkbox">
        <input type="checkbox" value="1" class="option_other_required" name="other_required[]" /> Other
      </label>
    </div>
    <div class="span2">
      <button type="button" class="btn btn-success save-option"><i class="icon-ok"></i></button>
      <button type="button" class="btn btn-danger delete-option"><i class="icon-trash"></i></button>
    </div>
  </div>
</div>

<select id="field_type_id" name="field_type_id" class="span12">
    <option value="">Select One</option>
    <option value="2" data-alias="checkbox">Checkbox</option>
    <option value="3" data-alias="date">Date</option>
    <option value="5" data-alias="fixed_text">Fixed Text</option>
    <option value="1" data-alias="radio">Radio</option>
    <option value="4" data-alias="text">Text</option>
    <option value="6" data-alias="textarea">Textarea</option>
    <option value="8" data-alias="yes_no">Yes/No</option>
</select>

<button id="me"> Click me</button>