Блог

Я столкнулся со странной проблемой и не уверен, является ли причиной этого jquery или комбинация моего сценария. Когда я устанавливаю значение текстового поля с помощью jquery, текстовое поле отображает правильное значение, но атрибут value внутри html остается тем, с которым он был загружен. Почему он отображает другой текст, чем тот, что в 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)
    {

    }
  

вы также можете использовать

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

вот что должно произойти: dom является динамическим, но когда вы просматриваете исходный код страницы, браузер показывает исходный html. (конечно, это зависит от того, какой браузер вы используете, каждый браузер индивидуален)