时间戳

首页 > 解决方案 > 为什么当代码有效时 JQuery .val() 方法有时会返回 undefined？

javascript - 为什么当代码有效时 JQuery .val() 方法有时会返回 undefined？

问题描述

不是重复的问题；所以请在推定前仔细考虑内容。

我已经使用 JQuery 多年了，以前从未见过这种行为。考虑以下：

<html>
   <div class="order-form-group">
      <label class="order-form-label" for="guestSpecialInstructions">Special Instructions:</label>
      <textarea class="order-form-textarea" id="guestSpecialInstructions" type="text"></textarea>
   </div>
   <div class="order-form-group">
     <label class="order-form-label" for="guestReason">Reason:</label>
     <textarea class="order-form-textarea" id="guestReason" type="text"></textarea>
   </div>
   <div class="button-container">
      <input class="order-form-submit" type="submit" value="Submit">
   </div>
</html>

我观察到以下脚本在某些情况下会返回“未定义”，即使“所有”更明显的原因已被消除。例如选择器不正确，页面上的 id 超过 1 个等。

<script>
   var specInstr = $("#guestSpecialInstructions").val();
   var guestReason = $("#guestReason").val();
</script>

我花了几个小时试图确定断开连接的原因。将我的代码剥离到最简单的基本级别，并且找不到任何合理的行为解释。

代码包含在一个简单的 HTML 页面中；没什么花哨的，并引用了 JQuery 存储库https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js

我有另一个在 aspx 页面中运行的项目，但标记仍然相同，并且 .val() 方法可以正常工作。

经过几个小时的碰壁后，我在 JQuery 上看到了帖子：.val() 不适用于 textarea，其他人使用有效代码证明了完全相同的问题，建议是：

<script>
    var specInstr = $("#guestSpecialInstructions")[0].value;
    var guestReason = $("#guestReason")[0].value;
</script>

然后问题就自动解决了。我唯一的问题是似乎没有人回答为什么当代码的所有方面都有效时 JQuery .text() 方法有时会返回 undefined 的问题。

解决方案很棒，但不了解问题存在的原因，在智力上真的一无所获。

如果我需要更改标题的措辞，请告诉我。

标签： javascriptjquery

解决方案

<textarea>如果它是预先填充的，则只能在 a 上使用 text()并返回原始内容

用户对内容的任何更改或以编程方式设置新值都不会改变 text() 返回的内容，因为它将始终是原始的预填充内容

始终用于val()获取和设置

var $txt = $('textarea')

console.log('text() Original content:', $txt.text())
console.log('val() Original content:', $txt.val())

$txt.val( 'Some new content')

console.log('text() after value change:', $txt.text())
console.log('val() after value change:', $txt.val())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="one" type="text">
  Original text
</textarea>

推荐阅读