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>

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

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

但是，如果我删除了第一行代码，然后在下面运行，则输入的值为“ test”。为什么在第一次使用该值时现在设置失败？

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

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

$("#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

简单说明：

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

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

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

这意味着，因为您要获取标记作为测试，因此您永远不会看到value 属性的更改，但是如果您要查看实际的DOM节点，您会在值属性下看到当前的正确值。

更长的解释：

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

For more information see the HTML Standard here

如果未更改节点，则DOM节点的property及其HTML attribute从呈现的角度来说是可互换的。-而且如果更改了 specific 属性，也是如此。

以任何方式更改id和class，无论是直接在DOM节点上还是使用element.setAttribute方法在Attribute对象中更改，都会导致两者值被更改。

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

或者checked和value的IDL属性不具有反射性。在DOM节点或属性对象上更改value或checked属性时，它不会更改另一个属性。 除了这些属性（还有id和class--虽然没有反射与不反射的真实列表-我想这是与...的身份有关的任何属性（将导致DOM中的节点重新渲染））内容属性和 DOM节点属性未绑定在一起。

如果打算更新或获取当前数据，则使用getAttribute和setAttribute毫无用处，因为只能找到当前数据在 DOM节点属性中。

同样，如果您试图通过查看标记来评估value属性是否发生了变化，则只会看到原始值。

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

1 个答案:

简单说明：

更长的解释：