使用 JQuery 设置输入值并不总是有效

Question

这些问题来自于查看单页应用示例located here。谁能解释为什么尝试使用 JQuery 设置输入控件的值在以下条件下/不起作用？我将包含不变的 HTML，然后呈现一系列我无法解释行为的 Javascript 行。首先是 HTML。

<form>
    <div class="container-fluid">
        <div class="data-container">
            <div class="form-group">
                <div class="row">
                    <div class="col">
                        <label>Region</label>
                        <input type="text" class="form-control request-region" id="regionfield" value="test" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

1. 如果我运行此代码，它会按预期工作，并且输入框的值为 99。请注意，由于我在下一个示例中发现的问题，我将值设置在两个不同的位置。

$("#regionfield").val(44);
var $entry = $("div").find(".data-container");
$entry.find("#regionfield").val(99);

1. 但如果我删除第一行代码并在输入值下方运行它，则输入值为“test”。为什么在第一个实例中设置值现在会失败？

var $entry = $("div").find(".data-container");
$entry.find("#regionfield").val(99);

1. 现在，如果我将第一个代码中的 HTML 保存到字符串中，清空控件，然后将其加载回来，为什么这段代码不会导致更新后的值 99 而是原始值“test”？

$("#regionfield").val(44);
var $entry = $("div").find(".data-container");
$entry.find("#regionfield").val(99);
var output = '';
output += $entry.html();
$entry.empty();
$entry.html(output);

更新我刚刚注意到，在使用 Bootply 和 Codeply 进行测试时，我得到了不同的结果。对于Bootply，代码示例#1 的结果是99，但在Codeply 上，结果是“测试”。这让我怀疑该行为与 Bootstrap 有关。

Answer 1

简单说明：

attribute值和property值不一样，在初始负载之外没有连接。

值属性存储在标记中。这是浏览器最初呈现的内容。与其他属性不同，通过 JavaScript 对 value 的任何后续更改都存储在 DOM 本身中。

当在您的应用程序过程中元素上的值发生更改时，属性/您的标记未更新。

这意味着因为您将 标记 作为测试，所以您永远不会看到 value 属性 发生变化，但是如果您要查看您将在值 property 下看到当前和正确的值的实际 DOM 节点。

---

更长的解释：

规范中的属性称为 IDL ，可以是反射的或非反射的。

For more information see the HTML Standard here

如果节点未更改 - 但如果特定属性发生更改，则 DOM 节点的 property 和其 HTML attribute 从呈现点可互换。

以任何方式更改id 和class，无论是直接在DOM 节点上还是在使用element.setAttribute 方法的属性对象内，都会导致两个 值都被更改。 p>

id 和class 是反射性 IDL 属性，因为它们实际上会观察其内容属性的变化，反之亦然。

或者checked 和value IDL 属性不反射。当 DOM 节点或属性对象上的 value 或 checked 属性发生更改时，它不会更改另一个的相应属性。 在这些属性之外（有不止 id 和 class - 虽然没有真正的反射与非反射列表 - 我认为它是与节点的身份相关的任何属性会导致重新渲染的 DOM ) 内容属性 和 DOM 节点属性 没有绑定在一起。

如果意图更新或获取当前数据，这使得使用getAttribute 和setAttribute 毫无用处，因为当前数据 只能在DOM 节点属性。

同样，如果您试图通过查看 标记 来判断 value 属性是否发生了变化，您将只能看到原始值。