jQuery瓦尔undefined用于动态生成的HTML

2sbarzqh 于 2023-08-04 发布在 jQuery

关注(0)|答案(2)|浏览(117)

我使用下面的代码动态生成输入字段，我希望在jQuery UI对话框中解析这些字段。首先，用户进入系统。单击“Confirm systems”（确认系统）按钮后，将为每个系统生成新的输入字段。现在，我想访问在动态生成的输入字段中输入的数据。但是，这些值总是未定义的。

$(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").children(".input").each(function() {
          alert(this.val().join(", ") + ". "); // <-- val undefined
        });
        $(this).dialog("close");
      }
    }]
  });
  $("#systems_btn").click(function() {
    $("#items").empty();
    var fieldSet = $("<fieldset id=\"items\"></fieldset>");
    systemsArray = $("#systems").val().split(",");
    for (const systemID in systemsArray) {
      var label = $("<label for=\"" + systemID + "\">" + "Items for " + systemsArray[systemID] + ":" + "</label>");
      var input = $("<input id=\"" + systemID + "\" size=40></input>");
      fieldSet.append(label);
      fieldSet.append(input);
    }
    $(this).parent().append(fieldSet);
  });
});

个字符
为清楚起见，下面是按下“Execute”按钮之前的对话框（由于瓦尔（）未定义，因此会崩溃）：

的数据

jquery

来源：https://stackoverflow.com/questions/76777627/jquery-val-undefined-for-dynamically-generated-html

2条答案

按热度按时间

wswtfjt71#

这里有两件事：
1.：.children(".input")将选择具有类输入的元素，但在您的代码中不是这样，因此我将其更改为.children("input")，它将选择类型为input的元素。
2.：this.val()将不起作用。瓦尔（）是一个jquery方法，我将其更改为$(this).val()，例如，在domelement中添加一个jquery Package 器，然后voilé，警报显示输入的值;- ）

$(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").children("input").each(function() {
          alert($(this).val());
        });
        $(this).dialog("close");
      }
    }]
  });
  $("#systems_btn").click(function() {
    $("#items").empty();
    var fieldSet = $("<fieldset id=\"items\"></fieldset>");
    systemsArray = $("#systems").val().split(",");
    for (const systemID in systemsArray) {
      var label = $("<label for=\"" + systemID + "\">" + "Items for " + systemsArray[systemID] + ":" + "</label>");
      var input = $("<input id=\"" + systemID + "\" size=40></input>");
      fieldSet.append(label);
      fieldSet.append(input);
    }
    $(this).parent().append(fieldSet);
  });
});

个字符

赞(0）回复(0）举报 2023-08-04

hiz5n14c2#

这是因为您使用的不是jQuery对象，而是没有.val()的JS对象
尝试执行$(this).val()

赞(0）回复(0）举报 2023-08-04