Jquery Not Working when dynamically adding rows in gridview

Question

I have written a jquery to calculate the total time difference between taken & Returned time & put the result in another textbox within the gridview too. it is working properly if i have only one row in gridview.but when i am adding gridview row dynamically from cs page code the jquery is no longer working.

This is my code:

<script type="text/javascript">

        $(document).ready(function() {
            calculateResult();
            $('#<%=grdMEIDLog.ClientID %>').find('.txtReturnedTime').each(function() {

                $(".txtReturnedTime").keyup(function() {
                    calculateResult();
                });
            });
        });

        function calculateResult() {
            //              $(".txtReturnedTime").keydown(function() {
            var startdt = new Date($(".txtTakenDate").val() + " " + $(".txtTakenTime").val());

            var enddt = new Date($(".txtReturnedDate").val() + " " + $(".txtReturnedTime").val());

            var diff = enddt - startdt;

            var days = Math.floor(diff / (1000 * 60 * 60 * 24));
            diff -= days * (1000 * 60 * 60 * 24);

            var hours = Math.floor(diff / (1000 * 60 * 60));
            diff -= hours * (1000 * 60 * 60);

            var mins = Math.floor(diff / (1000 * 60));
            diff -= mins * (1000 * 60);

            //                  var seconds = Math.floor(diff / (1000));
            //                  diff -= seconds * (1000);

            $(".txtMTTR").val(days + ":" + hours + ":" + mins);
        }

    </script>

This is how i am adding gridview row dynamically from cs pagecode with button click event.

 protected void btnAdd_Click(object sender, EventArgs e)
    {
        DataTable dtgrdRowAdd = new DataTable();
        dtgrdRowAdd.Columns.Add("SlNo");
        dtgrdRowAdd.Columns.Add("DEFECTNO");
        dtgrdRowAdd.Columns.Add("TypeOfJob");
        dtgrdRowAdd.Columns.Add("JobPlanning");
        dtgrdRowAdd.Columns.Add("DeptManPower");
        dtgrdRowAdd.Columns.Add("ExtManPower");
        dtgrdRowAdd.Columns.Add("JobCompliance");
        dtgrdRowAdd.Columns.Add("PTWNo");
        dtgrdRowAdd.Columns.Add("TakenDate");
        dtgrdRowAdd.Columns.Add("TakenTime");
        dtgrdRowAdd.Columns.Add("ReturndDate");
        dtgrdRowAdd.Columns.Add("ReturndTime");
        dtgrdRowAdd.Columns.Add("mttr");
        dtgrdRowAdd.Columns.Add("SparesUsed");

        foreach (GridViewRow grdrow in grdMEIDLog.Rows)
        {
            Label lblSLNo = (Label)grdrow.FindControl("lblSLNo");
            HiddenField hidDEFECTNO = (HiddenField)grdrow.FindControl("hidDEFECTNO");
            TextBox txtDEFECTNO = (TextBox)grdrow.FindControl("DEFECTNO");
            DropDownList ddlShift = (DropDownList)grdrow.FindControl("ddlShift");
            TextBox txtJobPlanning = (TextBox)grdrow.FindControl("txtJobPlanning");
            TextBox txtDeptManPower = (TextBox)grdrow.FindControl("txtDeptManPower");
            TextBox txtExtManPower = (TextBox)grdrow.FindControl("txtExtManPower");
            TextBox txtJobCompliance = (TextBox)grdrow.FindControl("txtJobCompliance");
            TextBox txtPTWNo = (TextBox)grdrow.FindControl("txtPTWNo");
            TextBox txtTakenDate = (TextBox)grdrow.FindControl("txtTakenDate");
            TextBox txtTakenTime = (TextBox)grdrow.FindControl("txtTakenTime");
            TextBox txtReturndDate = (TextBox)grdrow.FindControl("txtReturndDate");
            TextBox txtReturndTime = (TextBox)grdrow.FindControl("txtReturndTime");
            TextBox txtmttr=(TextBox)grdrow.FindControl("txtmttr");
            TextBox txtSparesUsed = (TextBox)grdrow.FindControl("txtSparesUsed");

            dtgrdRowAdd.Rows.Add(lblSLNo.Text,hidDEFECTNO.Value, ddlShift.SelectedValue, txtJobPlanning.Text, txtDeptManPower.Text, txtExtManPower.Text, txtJobCompliance.Text,
                txtPTWNo.Text, txtTakenDate.Text, txtTakenTime.Text, txtReturndDate.Text, txtReturndTime.Text, txtSparesUsed.Text);
        }
        dtgrdRowAdd.Rows.Add((dtgrdRowAdd.Rows.Count + 1).ToString(),"", 0, "", "", "", "", "", "", "", "", "", "");

        grdMEIDLog.DataSource = dtgrdRowAdd;
        grdMEIDLog.DataBind();
        grdMEIDLog.HeaderRow.Visible = false;
    }

NB: I had assigned different class name for each of the textbox within gridview.

Please help me to solve my problem.

try $(document).on('keyup', '.txtReturnedTime', function() {}); instead of $(".txtReturnedTime").keyup(function() {}); — s4ty
@s4ty i tried as u told. but it is giving "Microsoft JScript runtime error: Object doesn't support this property or method" Error. — Santanu Maulik
What are these other controls? When you refer to a selector like follows, .txtMTTR you are selecting one/more controls which have the same css class name. Do doing .val() on that (i.e. many controls) doesn't make sense. — deostroll

RajivRisi RajivRisi · Accepted Answer · 2014-08-27T06:05:55

Assume txtReturnedTime is a textbox. Call your function directly on onkeyup event like below. jQuery events will not work on dynamic elements. Because you called that event in DOM ready. But on DOM ready there is only one field. So the first field event is working fine. But other elements are created after DOM ready. So the jQuery events which is wrote in DOM ready will not work on that dynamic elements.

<input class="txtReturnedTime" type="text" onkeyup="calculateResult(this.value)">

Do whatever you want using this value. You can get this value in your function like below.

function calculateResult(info) {
    alert(info);
    # Get other field values like below.
    var txtTakenDate =  this.parent().find('.txtTakenDate').val();
    var txtTakenTime =  this.parent().find('.txtTakenTime').val();
    var txtReturnedDate =  this.parent().find('.txtReturnedDate').val();
    var txtMTTR =  this.parent().find('.txtMTTR');
    # Do your changes here using the above variables.
}

Jquery Not Working when dynamically adding rows in gridview

1 Answers