jquery - 为什么 JQuery 不更新隐藏字段

Question

我在 UpdatePanel 中有一些 DIV:

<asp:UpdatePanel runat="server" ID="upAddDays" UpdateMode="Conditional">
    <ContentTemplate>
        <div class="addDaysSection">
            <div class="leftdiv2">Task Name: </div>
            <div class="rightdiv2" style="overflow: hidden;">
                <asp:Label ID="lblTName" runat="server" Text="" ClientIDMode="Static"></asp:Label>
            </div>
        </div>
        <div class="addDaysSection">
            <div class="leftdiv2">Current Due Date: </div>
            <div class="rightdiv2">
                <asp:Label ID="lblCurrDD" runat="server" Text="" ClientIDMode="Static"></asp:Label>
            </div>
        </div>
        <div class="addDaysSection" style="padding: 10px 0 10px 0; height: 45px;">
            <div class="leftdiv2">Add Days to Extend: </div>
            <div class="rightdiv2">
                <div style="float: left; text-align: right; padding-right: 5%; height: 100%;">
                    <span style="display: inline-block; height: 100%; vertical-align: middle;"></span>
                    <img id="imgMinus" src="../theImages/addDaysMinus_OFF.png" style="vertical-align: middle; width: 35px; height: 35px; display: none;" />
                </div>
                <div style="float: left; text-align: center;">
                    <span style="display: inline-block; height: 100%; vertical-align: middle;"></span>
                    <input type="text" value="0" id="txtExtend" maxlength="3" placeholder="Number of Days" size="3" class="txtExtend" />
                </div>
                <div style="float: left; text-align: left; padding-left: 5%; height: 100%;">
                    <span style="display: inline-block; height: 100%; vertical-align: middle;"></span>
                    <img id="imgPlus" src="../theImages/addDaysPlus_OFF.png" style="vertical-align: middle; width: 35px; height: 35px;" />
                </div>
            </div>
        </div>
        <div class="addDaysSection">
            <div class="leftdiv2">New Due Date: </div>
            <div class="rightdiv2">
                <asp:Label ID="lblNewDD" runat="server" Text="" ClientIDMode="Static"></asp:Label>
            </div>
        </div>
    </ContentTemplate>
</asp:UpdatePanel>

以及页面上其他地方的隐藏字段，在 UpdatePanel 之外:

<input type="hidden" id="newDD" name="newDD" runat="server" />

JavaScript:

$("body").on('click', "#imgPlus", function (e) {
    //alert("plus");
    var vDays = $("#txtExtend").val();
    $("#txtExtend").val(parseInt(vDays) + 1);
    vDays = $("#txtExtend").val();
    if (vDays > 0) {
        $("#imgMinus").show();
    }
    else {
        $("#imgMinus").hide();
    }
    var date = new Date($("#lblCurrDD").text());
    var days = parseInt($("#txtExtend").val(), 10);

    if (!isNaN(date.getTime())) {
        date.setDate(date.getDate() + days);

        $("#lblNewDD").text(date.toInputFormat());
        alert($("#lblNewDD").text()); //displays: date
        $("#newDD").val($("#lblNewDD").text());
        alert($("#newDD").val()); //displays: undefined
    }
    else {
        alert("Invalid Date");
    }
});

$("body").on('click', "#imgMinus", function (e) {
    //alert("minus");
    var vDays = $("#txtExtend").val();
    if (vDays > 0) {
        $("#txtExtend").val(parseInt(vDays) - 1);
    }
    var vDays = $("#txtExtend").val();
    if (vDays <= 0) {
        $("#imgMinus").hide();
    }
    else {
        $("#imgMinus").show();
    }
    var date = new Date($("#lblCurrDD").text());
    var days = parseInt($("#txtExtend").val(), 10);

    if (!isNaN(date.getTime())) {
        date.setDate(date.getDate() - days);

        $("#lblNewDD").text(date.toInputFormat());
        alert($("#lblNewDD").text()); //displays: date
        $("#newDD").val($("#lblNewDD").text());
        alert($("#newDD").val()); //displays: undefined
    }
    else {
        alert("Invalid Date");
    }
});

为什么不使用日期更新隐藏值，而是显示 undefined？

Answer 1

因为当您将元素设置为 runat="server" 时，ASP.NET 会更改其 id，因此您必须通过 .ClientID< 引用生成的元素 id/属性:

$("#<%=newDD.ClientID %>").val()