onchange function is working in a initial textbox but not working in the another textbox

Question

When I do edit function in the text box the onchange function is working initially,But then i edit the next box filed the onchange function is not working,in some textbox i have give default values when i edit the textbox using onchange null values is displayed instead of default values.

overall Initial onchange function is called to every textbox present in the forms.

JavaScript:

$(document).ready(function () {
            $("input#btnEditExperience").click(function () {

                var id = $(this).attr("name");
                var hospitalname = $("#<%=txtHospitalName.ClientID%>").val();
                var department = $("#<%=txtDepartment.ClientID%>").val();
                var designation = $("#<%=txtDesignation.ClientID%>").val();
                 var Fromdate = $("#<%=txtFromDate.ClientID%>").val();
                var Todate = $("#<%=txtToDate.ClientID%>").val();
                var Workdescription = $("#<%=txtWorkDescription.ClientID%>").val();

                var Statusval = $("#<%=hdnExperienceID.ClientID%>").val();
                if (Statusval == '') {
                    $('.errorEditTitle').html('Status required!');
                    Statusval.className += ' errors-text';
                    return false;
                }
                //$("div.preloader").show();
                $.ajax({
                    type: 'POST',
                    url: pageUrl + "/UpdateExperience",
                    data: '{ExperienceID: "' + id + '",HospitalName:"' + hospitalname + '",Department:"' + department + '",Designation:"' + designation + '",FromDate:"' + Fromdate + '",ToDate:"' + Todate + '",WorkDescription: "' + Workdescription + '"  }',
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    success: OndocumentSuccess,
                    failure: function (response) {
                        alert(response.d);
                    }
                });
            });
        });
        function OndocumentSuccess(response) {
            //$("div.preloader").fadeOut();
            //$("#backgroundPopup").fadeOut("normal");

            $("#<%=hdnExperienceID.ClientID%>").val('')
            location.reload();
        }
        $(document).ready(function () {
            $("a.Editview").click(function () {
                $("#<%=hdnExperienceID.ClientID%>").val('');

            });
        });
        function Editvalue(Edit) {
            $("#<%=txtHospitalName.ClientID%>").val(Edit.value);
           $("#<%=txtDepartment.ClientID%>").val(Edit.value);
           $("#<%=txtDesignation.ClientID%>").val(Edit.value);
           $("#<%=txtFromDate.ClientID%>").val(Edit.value);
           $("#<%=txtToDate.ClientID%>").val(Edit.value);
           $("#<%=txtWorkDescription.ClientID%>").val(Edit.value);
            $("#<%=hdnExperienceID.ClientID%>").val(Edit.value);
        }

Asp Page:

<a id='<%#Eval("ExperienceID")%>' data-toggle="modal" data-target="#Experienceedit<%#Eval("ExperienceID")%>" href="" class="edit-me Editview"><i class="tg-edit fa fa-pencil"></i></a> 

Modal Popup:

<div class="modal fade bs-example-modal-lg" id='Experienceedit<%#Eval("ExperienceID")%>' tabindex="-1"
   role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="background-color:black;">
   <div class="modal-header" style="background-color:white;">
      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
      ×</button> 
      <h4 id="myModalLabel">
         Edit Experience
      </h4>
   </div>
   <div class="modal-body" style="background-color:white;">
      <div class="errorEditTitle">
      </div>
      <table class="index-table">
         <tr>
            <td>
               <label>
               Hospital Name<sub>*</sub></label>
            </td>
            <td>
               <asp:TextBox ID="txtHospitalName" runat="server" class="span11 " MaxLength="100" onchange="javascript:Editvalue(this);" Text='<%#Eval("HospitalName")%>'
                  ></asp:TextBox>
            </td>
         </tr>
         <tr>
            <td>
               <label>
               Department<sub>*</sub></label>
            </td>
            <td>
               <asp:TextBox ID="txtDepartment" runat="server" class="span5 " onchange="javascript:Editvalue(this);" Text='<%#Eval("Department")%>'
                  ></asp:TextBox>
            </td>
         </tr>
         <tr>
            <td>
               <label>
               Designation<sub>*</sub></label>
            </td>
            <td>
               <asp:TextBox ID="txtDesignation" runat="server" class="span5" onchange="javascript:Editvalue(this);" Text='<%#Eval("Designation")%>'
                  ></asp:TextBox>
            </td>
         </tr>
         <tr>
            <td>
               <label>
               From Date<sub>*</sub></label>
            </td>
            <td>
               <asp:TextBox ID="txtFromDate" ReadOnly="true" runat="server" Class="form-control " onchange="javascript:Editvalue(this);" Text='<%#Eval("FromDate")%>'></asp:TextBox>
            </td>
         </tr>
         <tr>
            <td>
               <label>
               To Date<sub>*</sub></label>
            </td>
            <td>
               <asp:TextBox ID="txtToDate" runat="server" ReadOnly="true" Class="form-control " onchange="javascript:Editvalue(this);" Text='<%#Eval("ToDate")%>'></asp:TextBox>
            </td>
         </tr>
         <tr>
            <td>
               <label>
               Work Description<sub>*</sub></label>
            </td>
            <td>
               <asp:TextBox ID="txtWorkDescription" TextMode="MultiLine" runat="server" Class="form-control " onchange="javascript:Editvalue(this);" Text='<%#Eval("WorkDescription")%>'></asp:TextBox>
            </td>
         </tr>
      </table>
   </div>
   <div class="modal-footer" style="background-color:white;">
      <input type="button" class="btn btn-success" id="btnEditExperience"
         value="Update" name="<%#Eval("ExperienceID")%>" />
      <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">
      Cancel</button>
   </div>
</div>

Answer 1

Try to change to another way to handle change event

$(document).on('change', '#txtFromDate', function() {
    //
});

Answer 2

If you are using jQuery I would recommend to bind events on document ready.

$(document).ready(function () {
            $("input#btnEditExperience").click(function () {

                var id = $(this).attr("name");
                var hospitalname = $("#<%=txtHospitalName.ClientID%>").val();
                var department = $("#<%=txtDepartment.ClientID%>").val();
                var designation = $("#<%=txtDesignation.ClientID%>").val();
                 var Fromdate = $("#<%=txtFromDate.ClientID%>").val();
                var Todate = $("#<%=txtToDate.ClientID%>").val();
                var Workdescription = $("#<%=txtWorkDescription.ClientID%>").val();

                var Statusval = $("#<%=hdnExperienceID.ClientID%>").val();
                if (Statusval == '') {
                    $('.errorEditTitle').html('Status required!');
                    Statusval.className += ' errors-text';
                    return false;
                }
                //$("div.preloader").show();
                $.ajax({
                    type: 'POST',
                    url: pageUrl + "/UpdateExperience",
                    data: '{ExperienceID: "' + id + '",HospitalName:"' + hospitalname + '",Department:"' + department + '",Designation:"' + designation + '",FromDate:"' + Fromdate + '",ToDate:"' + Todate + '",WorkDescription: "' + Workdescription + '"  }',
                    contentType: "application/json; charset=utf-8",
                    dataType: 'json',
                    success: OndocumentSuccess,
                    failure: function (response) {
                        alert(response.d);
                    }
                });
            });
        });
        function OndocumentSuccess(response) {
            //$("div.preloader").fadeOut();
            //$("#backgroundPopup").fadeOut("normal");

            $("#<%=hdnExperienceID.ClientID%>").val('')
            location.reload();
        }
        $(document).ready(function () {
            $("a.Editview").click(function () {
                $("#<%=hdnExperienceID.ClientID%>").val('');

            });

            $('input[type="textbox"]').on('click', Editvalue);
        });
        function Editvalue(Edit) {
            $("#<%=txtHospitalName.ClientID%>").val(Edit.value);
           $("#<%=txtDepartment.ClientID%>").val(Edit.value);
           $("#<%=txtDesignation.ClientID%>").val(Edit.value);
           $("#<%=txtFromDate.ClientID%>").val(Edit.value);
           $("#<%=txtToDate.ClientID%>").val(Edit.value);
           $("#<%=txtWorkDescription.ClientID%>").val(Edit.value);
           $("#<%=hdnExperienceID.ClientID%>").val(Edit.value);
        }

And remove onchange attributes.