用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);

2. 但是如果我删除第一行代码并仅在代码下面运行，则输入值为“ test”。为什么设置值在第一个实例中起作用时现在会失败？

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

3. 现在，如果我将第一个代码中的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);

Answer 1

简单说明：

值属性和值属性不同，并且未连接到初始负载之外。

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

在应用程序过程中更改元素上的值时，

属性/您的标记为未更新。

这意味着，因为您要抓住markup作为测试，所以永远不会看到value attribute更改，但是如果您查看实际的DOM节点，则会看到值property下的当前正确值。

---

详细说明：

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

For more information see the HTML Standard here

DOM节点的property及其HTML attribute从渲染的角度来看，如果节点未更改，则可互换，但是如果specific属性也已更改。

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

id和class是反射型 IDL属性，因为它们实际上会监视其内容属性的更改，反之亦然。

或者checked和value IDL属性是不反射。当value或checked属性在DOM节点或属性对象上更改时，它不会更改其他属性。这些属性之外（（id和class多于-尽管没有反射性与非反射性的真实列表...-我想这是与DOM中Node的身份有关的任何属性，导致重新渲染）内容属性和DOM节点属性未绑定在一起。

如果要更新或获取当前数据，则这将使getAttribute和setAttribute无效，因为当前数据仅在DOM节点属性中找到。” >