jQuery的val()方法在文本框上没有设置DOM值属性

Question

我遇到了一个奇怪的问题，不确定是jquery还是我的场景组合导致的。当我使用jquery设置文本框值时，文本框显示正确的值，但html内的value属性仍然是它加载时的那个值。为什么会显示与DOM中不同的文本？

我有一个动态生成的表单，使用jquery将两个数字相加并将结果显示在第三个文本框中，如下所示。您可以使用以下代码进行复现。

设计师文件

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $(".addToTotal").blur(function () {
            UpdateTotal();
        });
    });

    function UpdateTotal() {

        var add = 0;
        $(".addToTotal").each(function () {
            add += Number($(this).val());
        });
        $(".txtTotalPoints").val(add.toFixed(2));
        $("#para").text("Sum of all textboxes is : " + add);
    }

</script>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<input id="addAll" type="button" value="Sum all Textboxes" /><br />
<p id="para"> </p>
<br />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />

动态添加控件的代码后台文件如下：

        protected void Page_Init(object sender, EventArgs e)
    {
        TextBox txt1 = new TextBox();
        txt1.ID = "txt1";
        txt1.CssClass = "addToTotal";

        TextBox txt2 = new TextBox();
        txt2.ID = "txt2";
        txt2.CssClass = "addToTotal";

        TextBox txt3 = new TextBox();
        txt3.ID = "txt3";
        txt3.CssClass = "txtTotalPoints";

        PlaceHolder1.Controls.Add(txt1);
        PlaceHolder1.Controls.Add(txt2);
        PlaceHolder1.Controls.Add(txt3);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            UpdateTextBoxTextProperty(this);
        }
    }

    private void UpdateTextBoxTextProperty(Control parent)
    {
        foreach (Control c in parent.Controls)
        {
            if (c is TextBox)
            {
                string Id = c.ID;
                string fieldName = Id.Substring(3);
                (c as TextBox).Text = fieldName;
            }

            if (c.Controls.Count > 0)
            {
                UpdateTextBoxTextProperty(c);
            }
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {

    }

- DotNetInfo

Answer 1

你可以使用以下方式：

$(selector).attr("value","Hello World.");

- Bilal Murtaza

Answer 2

应该发生的是：DOM 是动态的，但当您查看页面源代码时，浏览器将显示原始 HTML。（当然，这取决于您使用的浏览器，每个浏览器都不同）

- Nathan

---

这在Chrome和FF上都会发生。我还没有在IE上尝试过。我对javascript的了解不多，但我认为jquery也应该更新value=""属性。我有什么遗漏吗？我应该怎么做才能更新dom值呢？ - DotNetInfo

修改后的值将保存在内存中，并在表单提交时提交到服务器（和/或在使用JavaScript检查时返回）-浏览器只显示从服务器加载的原始值，但这没什么好担心的。如果您希望在查看源代码时以不同的方式显示该值，则需要从服务器发送不同的值（但您不需要这样做，它没有特定的好处）。 - Nathan

很酷，这意味着这是默认行为，我对吗？但是当我在后端代码中获取文本框文本值进行回发时，它仍然显示原始值而不是更新后的值。所以我认为浏览器应该更新它。无论如何感谢您的帮助，我会找出在我的原始项目的代码后面的问题所在。 - DotNetInfo