文本框上的 jquery val() 未设置 DOM 值属性答案

【问题标题】：jquery val() on textbox doesn't set DOM value attribute文本框上的 jquery val() 未设置 DOM 值属性
【发布时间】：2011-06-11 08:17:42
【问题描述】：

我面临一个奇怪的问题，不确定是 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)
    {

    }

【问题讨论】：

标签： c# javascript jquery .net asp.net

【解决方案1】：

你也可以使用

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

【讨论】：

【解决方案2】：

这就是应该发生的事情：dom是动态的，但是当您查看页面源时，浏览器将显示原始html。（当然这要看你用的是什么浏览器，每个浏览器都不一样）

【讨论】：

Chrome 和 FF 都会出现这种情况。我还没有在IE上尝试过。一般来说，我对 javascript 的了解不多，但我认为 jquery 也应该更新 value="" 属性。我错过了什么吗？我应该怎么做才能更新那个 dom 值
更改的值保存在内存中，并在提交表单时提交给服务器（和/或在使用 javascript 检查时返回） - 浏览器只显示从服务器加载的原始值，但这没什么好担心的。如果您希望在查看源代码时该值显示不同，则需要从服务器发送不同的值（但您不需要这样做，它没有特别的好处）
酷，这意味着这是默认行为，对吗？但是当我从回发代码中获取文本框文本值时，它仍然显示原始值而不是更新值。所以我认为浏览器应该更新它。无论如何，感谢您的帮助，并将找出问题所在