动态生成HTML元素时jQuery val()返回undefined问题求助

核心问题分析 #

导致val()返回undefined的原因有三个：

• 选择器错误：你用$("#items").children(".input")查找输入框，但动态生成的<input>标签没有添加.input类，根本选不到目标元素。
• 原生DOM对象误用：each循环里的this是原生DOM节点，不是jQuery对象，原生元素没有val()方法，直接调用会报错。
• 方法调用错误：val()返回的是字符串，不是数组，调用.join(", ")完全没必要，反而会引发新的错误。

另外还有个小问题：第一次点击「确认系统」时，$("#items").empty()会报错，因为此时#items还未创建，找不到对应元素。

修正后的代码 #

$(document).ready(function() {
  var systemsArray;
  var div = $("<div id=\"dialog\"></div>");
  div.append("<p>" +
    "<label for=\"systems\">Systems:</label>" +
    "<input id=\"systems\" size=40></input>" +
    "<button id=\"systems_btn\">Confirm systems</button>" +
    "</p>");
  $("body").append(div);
  $("#dialog").dialog({
    autoOpen: true,
    modal: true,
    width: 800,
    height: 500,
    buttons: [{
      text: "Execute",
      click: function() {
        // 直接查找#items下的input元素，无需依赖不存在的类
        $("#items input").each(function() {
          // 将原生DOM转为jQuery对象后调用val()
          alert($(this).val());
        });
        $(this).dialog("close");
      }
    }]
  });
  $("#systems_btn").click(function() {
    // 先判断#items是否存在，存在再清空，避免首次点击报错
    var existingItems = $("#items");
    if (existingItems.length > 0) {
      existingItems.empty();
    } else {
      // 不存在则创建新的fieldset
      var fieldSet = $("<fieldset id=\"items\"></fieldset>");
      $(this).parent().append(fieldSet);
    }
    systemsArray = $("#systems").val().split(",");
    for (const systemID in systemsArray) {
      var systemName = systemsArray[systemID].trim(); // 去除系统名称前后空格
      var label = $("<label for=\"input_" + systemID + "\">" + "Items for " + systemName + ":" + "</label>");
      // 给input设置唯一id，避免和循环变量systemID冲突（如果systemID是数字，id不能纯数字）
      var input = $("<input id=\"input_" + systemID + "\" size=40></input>");
      $("#items").append(label).append(input);
    }
  });
});

关键修改说明 #

• 选择器调整：用$("#items input")直接定位输入框，不再依赖不存在的.input类。
• DOM对象转换：在each循环中用$(this)把原生元素转为jQuery对象，再调用val()方法。
• 修复初始化错误：先判断#items是否存在，避免首次点击「确认系统」时的清空报错。
• 优化id命名：给输入框的id添加前缀input_，避免出现纯数字id（不符合HTML规范），同时去除系统名称的前后空格提升体验。

内容的提问来源于stack exchange，提问作者beautifulsouper