动态生成的HTML中，jQuery的val方法返回undefined。

huangapple
go评论125阅读模式
英文:

jQuery val undefined for dynamically generated HTML

问题

我使用以下代码动态生成输入字段，我想在jQuery UI对话框中解析这些字段。首先，用户输入系统。点击“确认系统”按钮后，为每个系统生成新的输入字段。现在，我想访问动态生成的输入字段中输入的数据。然而，这些值始终为undefined。

以下是代码示例：

  1. $(document).ready(function() {
  2.   var systemsArray;
  3.   var div = $("<div id=\"dialog\"></div>");
  4.   div.append("<p>" +
  5.     "<label for=\"systems\">Systems:</label>" +
  6.     "<input id=\"systems\" size=40></input>" +
  7.     "<button id=\"systems_btn\">Confirm systems</button>" +
  8.     "</p>");
  9.   $("body").append(div);
  10.   $("#dialog").dialog({
  11.     autoOpen: true,
  12.     modal: true,
  13.     width: 800,
  14.     height: 500,
  15.     buttons: [{
  16.       text: "Execute",
  17.       click: function() {
  18.         $("#items").children(".input").each(function() {
  19.           alert(this.val().join(", ") + ". "); // <-- val undefined
  20.         });
  21.         $(this).dialog("close");
  22.       }
  23.     }]
  24.   });
  25.   $("#systems_btn").click(function() {
  26.     $("#items").empty();
  27.     var fieldSet = $("<fieldset id=\"items\"></fieldset>");
  28.     systemsArray = $("#systems").val().split(",");
  29.     for (const systemID in systemsArray) {
  30.       var label = $("<label for=\"" + systemID + "\">" + "Items for " + systemsArray[systemID] + ":" + "</label>");
  31.       var input = $("<input id=\"" + systemID + "\" size=40></input>");
  32.       fieldSet.append(label);
  33.       fieldSet.append(input);
  34.     }
  35.     $(this).parent().append(fieldSet);
  36.   });
  37. });

为了清晰起见，这是在按下“执行”按钮之前对话框的外观（由于val()未定义而崩溃）：
动态生成的HTML中，jQuery的val方法返回undefined。

  2. <details>
  3. <summary>英文:</summary>
  5. 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 &quot;Confirm systems&quot; 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.
  7. &lt;!-- begin snippet: js hide: false console: true babel: false --&gt;
  9. &lt;!-- language: lang-js --&gt;
  11.     $(document).ready(function() {
  12.       var systemsArray;
  13.       var div = $(&quot;&lt;div id=\&quot;dialog\&quot;&gt;&lt;/div&gt;&quot;);
  14.       div.append(&quot;&lt;p&gt;&quot; +
  15.         &quot;&lt;label for=\&quot;systems\&quot;&gt;Systems:&lt;/label&gt;&quot; +
  16.         &quot;&lt;input id=\&quot;systems\&quot; size=40&gt;&lt;/input&gt;&quot; +
  17.         &quot;&lt;button id=\&quot;systems_btn\&quot;&gt;Confirm systems&lt;/button&gt;&quot; +
  18.         &quot;&lt;/p&gt;&quot;);
  19.       $(&quot;body&quot;).append(div);
  20.       $(&quot;#dialog&quot;).dialog({
  21.         autoOpen: true,
  22.         modal: true,
  23.         width: 800,
  24.         height: 500,
  25.         buttons: [{
  26.           text: &quot;Execute&quot;,
  27.           click: function() {
  28.             $(&quot;#items&quot;).children(&quot;.input&quot;).each(function() {
  29.               alert(this.val().join(&quot;, &quot;) + &quot;. &quot;); // &lt;-- val undefined
  30.             });
  31.             $(this).dialog(&quot;close&quot;);
  32.           }
  33.         }]
  34.       });
  35.       $(&quot;#systems_btn&quot;).click(function() {
  36.         $(&quot;#items&quot;).empty();
  37.         var fieldSet = $(&quot;&lt;fieldset id=\&quot;items\&quot;&gt;&lt;/fieldset&gt;&quot;);
  38.         systemsArray = $(&quot;#systems&quot;).val().split(&quot;,&quot;);
  39.         for (const systemID in systemsArray) {
  40.           var label = $(&quot;&lt;label for=\&quot;&quot; + systemID + &quot;\&quot;&gt;&quot; + &quot;Items for &quot; + systemsArray[systemID] + &quot;:&quot; + &quot;&lt;/label&gt;&quot;);
  41.           var input = $(&quot;&lt;input id=\&quot;&quot; + systemID + &quot;\&quot; size=40&gt;&lt;/input&gt;&quot;);
  42.           fieldSet.append(label);
  43.           fieldSet.append(input);
  44.         }
  45.         $(this).parent().append(fieldSet);
  46.       });
  47.     });
  49. &lt;!-- language: lang-html --&gt;
  51.     &lt;link href=&quot;//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css&quot; rel=&quot;stylesheet&quot; /&gt;
  52.     &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
  53.     &lt;script src=&quot;//code.jquery.com/ui/1.11.2/jquery-ui.js&quot;&gt;&lt;/script&gt;
  55. &lt;!-- end snippet --&gt;
  58.  For clarity, this is what the dialog looks like before pressing the &quot;Execute&quot; button (which crashes, because val() is undefined):
  59. [![Screenshot of dialog][1]][1]
  62.   [1]: https://i.stack.imgur.com/zT8Av.png
  64. </details>
  67. # 答案1
  68. **得分**: 1
  70. 有两个问题：
  72. 1.：`.children(".input")`会选择具有类名为input的元素，但在你的代码中没有这样的元素，所以我将其更改为`.children("input")`，这将选择类型为input的元素。
  74. 2.：`this.val()`不起作用，因为.val()是一个jQuery方法，我将其更改为`$(this).val()`，即给DOM元素添加一个jQuery包装器，然后警告框将显示输入的值；-)
  76. ```javascript
  77. $(document).ready(function() {
  78.   var systemsArray;
  79.   var div = $("<div id=\"dialog\"></div>");
  80.   div.append("<p>" +
  81.     "<label for=\"systems\">Systems:</label>" +
  82.     "<input id=\"systems\" size=40></input>" +
  83.     "<button id=\"systems_btn\">Confirm systems</button>" +
  84.     "</p>");
  85.   $("body").append(div);
  86.   $("#dialog").dialog({
  87.     autoOpen: true,
  88.     modal: true,
  89.     width: 800,
  90.     height: 500,
  91.     buttons: [{
  92.       text: "Execute",
  93.       click: function() {
  94.         $("#items").children("input").each(function() {
  95.           alert($(this).val());
  96.         });
  97.         $(this).dialog("close");
  98.       }
  99.     }]
  100.   });
  101.   $("#systems_btn").click(function() {
  102.     $("#items").empty();
  103.     var fieldSet = $("<fieldset id=\"items\"></fieldset>");
  104.     systemsArray = $("#systems").val().split(",");
  105.     for (const systemID in systemsArray) {
  106.       var label = $("<label for=\"" + systemID + "\">" + "Items for " + systemsArray[systemID] + ":" + "</label>");
  107.       var input = $("<input id=\"" + systemID + "\" size=40></input>");
  108.       fieldSet.append(label);
  109.       fieldSet.append(input);
  110.     }
  111.     $(this).parent().append(fieldSet);
  112.   });
  113. });
  1. <link href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" rel="stylesheet" />
  2. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  3. <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
英文:

There are two things:

1.: .children(&quot;.input&quot;) would select elements with the class input, thats not the case in your code, so i changed to .children(&quot;input&quot;) 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 动态生成的HTML中，jQuery的val方法返回undefined。

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-js -->

  1. $(document).ready(function() {
  2.   var systemsArray;
  3.   var div = $(&quot;&lt;div id=\&quot;dialog\&quot;&gt;&lt;/div&gt;&quot;);
  4.   div.append(&quot;&lt;p&gt;&quot; +
  5.     &quot;&lt;label for=\&quot;systems\&quot;&gt;Systems:&lt;/label&gt;&quot; +
  6.     &quot;&lt;input id=\&quot;systems\&quot; size=40&gt;&lt;/input&gt;&quot; +
  7.     &quot;&lt;button id=\&quot;systems_btn\&quot;&gt;Confirm systems&lt;/button&gt;&quot; +
  8.     &quot;&lt;/p&gt;&quot;);
  9.   $(&quot;body&quot;).append(div);
  10.   $(&quot;#dialog&quot;).dialog({
  11.     autoOpen: true,
  12.     modal: true,
  13.     width: 800,
  14.     height: 500,
  15.     buttons: [{
  16.       text: &quot;Execute&quot;,
  17.       click: function() {
  18.         $(&quot;#items&quot;).children(&quot;input&quot;).each(function() {
  19.           alert($(this).val());
  20.         });
  21.         $(this).dialog(&quot;close&quot;);
  22.       }
  23.     }]
  24.   });
  25.   $(&quot;#systems_btn&quot;).click(function() {
  26.     $(&quot;#items&quot;).empty();
  27.     var fieldSet = $(&quot;&lt;fieldset id=\&quot;items\&quot;&gt;&lt;/fieldset&gt;&quot;);
  28.     systemsArray = $(&quot;#systems&quot;).val().split(&quot;,&quot;);
  29.     for (const systemID in systemsArray) {
  30.       var label = $(&quot;&lt;label for=\&quot;&quot; + systemID + &quot;\&quot;&gt;&quot; + &quot;Items for &quot; + systemsArray[systemID] + &quot;:&quot; + &quot;&lt;/label&gt;&quot;);
  31.       var input = $(&quot;&lt;input id=\&quot;&quot; + systemID + &quot;\&quot; size=40&gt;&lt;/input&gt;&quot;);
  32.       fieldSet.append(label);
  33.       fieldSet.append(input);
  34.     }
  35.     $(this).parent().append(fieldSet);
  36.   });
  37. });

<!-- language: lang-html -->

  1. &lt;link href=&quot;//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css&quot; rel=&quot;stylesheet&quot; /&gt;
  2. &lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js&quot;&gt;&lt;/script&gt;
  3. &lt;script src=&quot;//code.jquery.com/ui/1.11.2/jquery-ui.js&quot;&gt;&lt;/script&gt;

<!-- 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()

huangapple
  • 本文由 发表于 2023年7月27日 15:58:30
  • 转载请务必保留本文链接：https://go.coder-hub.com/76777627.html
  • javascript
  • jquery
  • jquery-ui
  • undefined
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定