英文:
jQuery val undefined for dynamically generated HTML
问题
我使用以下代码动态生成输入字段，我想在jQuery UI对话框中解析这些字段。首先，用户输入系统。点击“确认系统”按钮后，为每个系统生成新的输入字段。现在，我想访问动态生成的输入字段中输入的数据。然而，这些值始终为undefined。
以下是代码示例：
$(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);
});
});
为了清晰起见，这是在按下“执行”按钮之前对话框的外观（由于val()未定义而崩溃）：
<details>
<summary>英文:</summary>
I use the following code to dynamically generate input fields, which I want to parse in a jQuery UI dialog. First, the user enters systems. After a click on the "Confirm systems" button, new input fields for each system are generated. Now, I want to access the data entered in the dynamically generated input fields. However, these values are always undefined.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
$(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);
});
});
<!-- language: lang-html -->
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<!-- end snippet -->
For clarity, this is what the dialog looks like before pressing the "Execute" button (which crashes, because val() is undefined):
[![Screenshot of dialog][1]][1]
[1]: https://i.stack.imgur.com/zT8Av.png
</details>
# 答案1
**得分**: 1
有两个问题：
1.：`.children(".input")`会选择具有类名为input的元素，但在你的代码中没有这样的元素，所以我将其更改为`.children("input")`，这将选择类型为input的元素。
2.：`this.val()`不起作用，因为.val()是一个jQuery方法，我将其更改为`$(this).val()`，即给DOM元素添加一个jQuery包装器，然后警告框将显示输入的值；-)
```javascript
$(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);
});
});
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
英文:
There are two things:
1.: .children(".input") would select elements with the class input, thats not the case in your code, so i changed to .children("input") which will select elements of type input
2.: this.val() will not work as .val() is a jquery method, i changed it to $(this).val() e.g adding a jquery wrapper to the domelement and voilâ, the alert shows the entered value 
<!-- begin snippet: js hide: false console: true babel: null -->
<!-- language: lang-js -->
$(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);
});
});
<!-- language: lang-html -->
<link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<!-- end snippet -->
答案2
得分: 0
这是因为你使用的是JS对象，而不是jQuery对象，JS对象没有.val()方法。
尝试使用$(this).val()。
英文:
That is because you are using not jQuery object, but JS object that does not have .val()
Try doing $(this).val()
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论