jQuery .attr('value', 'new_value') 不起作用？答案

【问题标题】：jQuery .attr('value', 'new_value') not working?jQuery .attr('value', 'new_value') 不起作用？
【发布时间】：2016-08-09 22:52:25
【问题描述】：

我正在尝试使用 jQuery 动态更改输入的实际 HTML value 属性。尽管使用input.attr('value', 'myNewVal'); 可以在视觉上对其进行更改，但当我使用 Chrome 中的开发人员工具检查源代码时，HTML 属性并没有改变。

由于我稍后会检查一些 PHP 以查看输入是否具有其原始值，因此我需要一种更改实际 HTML 属性的方法，最好是在 jQuery 中。有没有其他人遇到过这个烦人的错误，你们中有人知道解决方法吗？

我也尝试过使用.val() 并且发生了同样的情况 - 底层 HTML 属性没有改变。

【问题讨论】：

您是否尝试过提交表单并检查所提供的 PHP 内容？
您看不到 HTML 的变化并没有什么不同。您的更改已完成。

标签： javascript jquery

【解决方案1】：

attr 应该也可以工作，特别是因为您确实看到它发生了变化，但也尝试使用 val - 它更适合更改值：

input.val('myNewVal');

确保不使用“查看源代码”命令，它会重新加载页面，或在页面加载时显示页面。相反，使用 DOM 查看器 - 右键单击输入元素并选择 “检查元素”。（这与Windows中Chrome中的“开发工具” - Ctrl+Shift+I相同）

【讨论】：

应该提到我已经尝试过了，它不会影响实际的底层 HTML 属性。
一定要使用.val()。 jQuery 在那里提供了很好的服务，提供了一个通用的接口，例如文本区域和输入。我记得一些与.attr('value') 和 IE 相关的错误。 .val() 也会处理这个问题
这并没有解决问题：值已成功更改。没有更新的是工具显示的标记。
@Jon - 我希望现在好多了，我已经到了。
@Mooncrater - 知道了，很高兴它成功了。我也会删除我的cmets。谢谢！

【解决方案2】：

attr() 和 val() 都专门处理 value 属性 [2014 年 2 月更新：这在 jQuery 1.6 之前是正确的，但在引入 @ 之后就不是这样了987654324@ in 1.6]，不是属性。 value 属性仅指定输入的初始值。一旦输入中的实际文本发生更改（通过用户输入或脚本）， value 属性和属性将完全独立运行。在几乎所有情况下，这都无关紧要，因为它几乎总是您想要的当前值（并且是提交给服务器的那个值）。

如果您确实必须更改实际属性（我很确定您不需要），请通过setAttribute() 进行：

input[0].setAttribute('value', 'myNewVal');

请注意，IE getAttribute() 和 setAttribute() 的支持，因此上述内容不适用于这些浏览器。

【讨论】：

整个概念听起来非常适得其反。我的意思是，因为当点击“关闭”导致计算机“重新启动”（相比之下）？
哦，再说一次，如果开发者工具确实显示旧值，为什么要首先使用它们？任何人都可以通过查看页面源来查看旧值。它破坏了整个目的。
@Christian：为当前和初始状态保留不同的值对我来说似乎并不合理，但我同意在 DOM 中完成它的机制不是很直观。 jQuery 并没有通过假装这种人们不甚了解的根本区别不存在它不幸地命名为 attr() 的方法来解决问题。
@Christian：对于文本输入框，您可以通过查看页面来查看当前值:)
@Tim Down - 啊哈！你让我到了那里。无论哪种情况，关于属性与属性的小信息+1；我认为从未存在过的东西（或者说，与其说是事实，不如说是一个怪癖）。 编辑： 可以说，输入可能已被隐藏（或者它可能属于隐藏类型），这再次将我们带到了我们的小困境。

【解决方案3】：

使用.val()。

input.val("some text");

根据您的评论，view source 很可能不会更新。如果您仍然获得原始值，则必须进行其他操作，并且很可能需要更多详细信息。

jsfiddlegoodness.

【讨论】：

@Christian，我的立场是正确的，我一直认为是这样，但我错了。

【解决方案4】：

这不是错误。价值属性不应该改变。

input 控件有点特别。根据 HTML 规范，value 内容属性给出了input 元素的默认值。您可以在 DOM 资源管理器中查看以编程方式设置或由用户更改的实际控制值。当表单被重置时，元素的值被设置为value 内容属性的值。（这里的值太多了:)）

这是所有 VISIBLE 输入类型的标准行为。（尝试设置 HIDDEN 元素的值，并且 value 内容属性将被更新......至少在 Firefox 中）。

【讨论】：

+1 @Tim Down：对于可见输入控件，当前值在页面上

【解决方案5】：

不要使用.attr()来更改值，使用.val()，这是专门为此目的而制作的：

input.val("new value");

【讨论】：

【解决方案6】：

那是因为开发者工具不会刷新。这是这些工具中的一个众所周知的错误，包括 Opera、Safari 和 Firebug（后者是一个不同的问题）。

据我所知，您可以右键单击源树窗口并点击“刷新”。这不会刷新页面，只是源视图。不过，这个“修复”在 firebug 中不起作用。

【讨论】：

+1，这是正确解决问题的唯一答案。
那么你正在处理两个错误。做类似的事情：<button onclick="alert('val='+input.val());">Test</button>
这根本不是开发人员工具中的错误。 jQuery 的attr() 方法几乎总是改变properties，而不是属性。对于value，一旦值被更改（通过用户输入或脚本），value 属性和value 属性将具有不同的值。
我不太同意这是这 4 种浏览器所有中的常见错误。当我调试脚本时，我非常依赖 Firebug 和 Chrome，我从来没有遇到过它们的问题——它们总是用 DOM 刷新，至少在我的经验中是这样。
@Christian Sciberras 我以 100% 的信心向您保证，Microsoft 绝对不使用 WebKit 开发人员工具 :-)

【解决方案7】：

它不会改变大多数开发工具的 DOM 浏览器中的值。但是 JavaScript 仍然会获取当前值。所以

var newValue = 'new';
$(sel).val(newValue);
newValue == $(sel).val(); // true

【讨论】：

【解决方案8】：

他们通知您使用 .val("value") 方法的回复是正确的，我知道查看这些更改（在源代码中）的唯一方法是使用 Firefox Web Developer Plugin 并单击“查看源代码” ->“查看生成的源代码”。这显示了源在 DOM 操作（即调用 .val() 方法）发生之后，我在处理修改 DOM 元素的函数/方法时经常使用它。

回顾一下：[#input_id = 输入字段的 ID]

$("#input_id").val("new value");

然后使用插件查看生成的源码，就会看到更新后的值。

【讨论】：

【解决方案9】：

开发工具会向您显示来自服务器的源代码（对于 value 属性），因此您可以看到真正的原始值。

如果您想更改它（并检查新值），您可以在某处存储引用。最好使用.data() 方法并检查存储的值。

尽管出于使用目的（通过 JS 提交或访问它），通过 .attr() 或 .val() 方法更改值就足够了。

【讨论】：

【解决方案10】：

我有一个案例，其中 jQuery 函数 .val() 和 .attr("value", "...") 对于 url 的值不正确。函数会更新用户界面，但不会影响 DOM(source)。在这种情况下应该使用：

jQueryObj[0].setAttribute("value", "...");

对于jQuery v1.5.* => v1.6.* 是正确的，对于其他版本则不检查。

【讨论】：

【解决方案11】：

这可能有点跑题了，但是我发现当我在 jQuery 中使用 .data() 函数时，该值设置正确，但更改并未反映在开发人员工具中。

所以，

$('#element').data('to-update', 'newValue')

在开发者工具（元素视图）中仍然显示旧值。

但是

$('#element').data('to-update')

返回“新值”

【讨论】：

这是因为 data 在 jQuery 中的行为略有不同。