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

时间:2019-12-17 00:32:07

标签: javascript jquery html bootstrap-4 single-page-application

这些问题来自查看单页应用程序示例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”? / 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);

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

1 个答案:

答案 0 :(得分:2)

简单说明

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

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

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

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


更长的解释:

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

For more information see the HTML Standard here

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

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

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

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

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

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