javascript - onchange 函数在初始文本框中工作，但在另一个文本框中不起作用

Question

当我在文本框中编辑功能时，onchange 功能最初正在工作，但是后来我编辑下一个框时，onchange 功能不起作用，在某些文本框中，当我使用 onchange null 编辑文本框时，我给出了默认值显示值而不是默认值。

总体初始 onchange 函数被调用到表单中存在的每个文本框。

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 页面:

<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> 

模态弹出窗口:

<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

如果您使用 jQuery，我建议在文档就绪时绑定(bind)事件。

$(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);
        }

并删除 onchange 属性。