为什么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，SOU你必须通过.ClientID属性引用元素生成的ID：

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