Question

我写了一个jquery来计算拍摄时间与拍摄时间之差。返回时间＆amp;将结果放在gridview中的另一个文本框中。如果我在gridview中只有一行，它工作正常。但是当我从cs页面代码动态添加gridview行时，jquery不再有效。

这是我的代码：

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

这就是我通过按钮点击事件从cs页面代码动态添加gridview行的方法。

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

注意：我为gridview中的每个文本框分配了不同的类名。

请帮我解决问题。

Answer 1

假设txtReturnedTime是一个文本框。直接在onkeyup事件上调用您的函数，如下所示。 jQuery事件不适用于动态元素。因为您已准备好在DOM中调用该事件。但是在DOM准备就绪时，只有一个领域。所以第一场比赛活动正常。但是在DOM就绪之后创建了其他元素。因此，在DOM中编写的jQuery事件将无法在该动态元素上运行。

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

使用此值执行任何操作。您可以在函数中获得此值，如下所示。

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

在gridview中动态添加行时，Jquery不起作用

1 个答案: