将datetimepicker绑定到动态创建的文本框-jQuery_Jquery

将datetimepicker绑定到动态创建的文本框-jQuery

jquery

将datetimepicker绑定到动态创建的文本框-jQuery,jquery,Jquery,我正在创建一个dataTable，其中一行将包含五列。第三列和第四列将有一个文本框，该文本框使用唯一id动态创建。第四行用于提供日期。我想用第四列中的每个文本框绑定datetimepicker。这就是我所做的： table = jQuery("#table_billing").dataTable({ "sAjaxSource": "includes/inc-billing2-db.php?mode=billing_dataTable",

我正在创建一个dataTable，其中一行将包含五列。第三列和第四列将有一个文本框，该文本框使用唯一id动态创建。第四行用于提供日期。我想用第四列中的每个文本框绑定datetimepicker。这就是我所做的：

table = jQuery("#table_billing").dataTable({
                "sAjaxSource": "includes/inc-billing2-db.php?mode=billing_dataTable",
                "bDestroy": true,
                "bPaginate": false,
                "bInfo": false,
                "bFilter": false,
                "bSort": false,
                "aoColumnDefs": [
                    {
                        "aTargets": [2],
                        "mRender": function(data, type, row) {
                            return '<input type="text" class="form-control invoice_number" name="invoice_number" id="invoice_number_'+ a +'" placeholder="Invoice Number" required="required" onblur="getvalue(this)">';


                        }
                    },
                    {
                        "aTargets": [3],
                        "mRender": function(data, type, row) {
                            return '<input type="text" class="form-control date" name="invoice_date" id="invoice_date_'+ b +'" placeholder="Invoice Date" required="required" onblur="getdate(this)">';

                        }
                    },
                    {
                        "aTargets": [4],
                        "mRender": function(data, type, row) {
                            return '<input type="button" class="btn-group btn-default btn-sm save" value="Save" name="save_bill" id="save_bill" onclick="jQuery(this).save(' + row[3] + ', ' + row[4] + ');">';
                        }
                    }
                ],
                "fnCreatedRow": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
                    jQuery("#invoice_date_'+b+'").datetimepicker({ format: "<?php echo $jquery_date_format; ?>" });
                    a = a + 1;
                    b = b + 1;
                    //c = c + 1;

                }
            });

table=jQuery（“#table#u billing”）.dataTable({
“sAjaxSource”：“includes/inc-billing2-db.php？mode=billing_dataTable”，
是的，
“bPaginate”：错误，
“bInfo”：假，
“bFilter”：错误，
“bSort”：错误，
“aoColumnDefs”：[
{
“目标”：[2]，
“mRender”：函数（数据、类型、行）{
返回“”；
}
},
{
“目标”：[3]，
“mRender”：函数（数据、类型、行）{
返回“”；
}
},
{
“目标”：[4]，
“mRender”：函数（数据、类型、行）{
返回“”；
}
}
],
“fnCreatedRow”：函数（nRow、aData、iDisplayIndex、iDisplayIndexFull）{
jQuery（“#invoice_date_'+b+”）.datetimepicker（{格式：“}）；
a=a+1；
b=b+1；
//c=c+1；
}
});

我试图将datetimepicker tp绑定到动态生成的文本框中，但做不到。我怎么做？我应该如何显示它？

它应该是这样的：

"fnCreatedRow": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
   jQuery("#invoice_date_"+b).datetimepicker({ format: "<?php echo $jquery_date_format; ?>" });
   a = a + 1;
   b = b + 1;
}

“fnCreatedRow”：函数（nRow、aData、iDisplayIndex、iDisplayIndexFull）{
jQuery（“#发票u日期”+b）.datetimepicker（{格式：“}）；
a=a+1；
b=b+1；
}

应该是这样的：

"fnCreatedRow": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
   jQuery("#invoice_date_"+b).datetimepicker({ format: "<?php echo $jquery_date_format; ?>" });
   a = a + 1;
   b = b + 1;
}

“fnCreatedRow”：函数（nRow、aData、iDisplayIndex、iDisplayIndexFull）{
jQuery（“#发票u日期”+b）.datetimepicker（{格式：“}）；
a=a+1；
b=b+1；
}

这里的问题是，我在渲染完成之前定义了datetimepicker。因此，代码不会被执行。渲染完成后，我们必须定义它。因此，答案是：

jQuery("#table_billing").dataTable({
    "sAjaxSource": "billing-db.php?mode=billing_dataTable",
    "bDestroy": true,
    "bPaginate": false,
    "bInfo": false,
    "bFilter": false,
    "bSort": false,
    "aoColumnDefs": [
        {
            "aTargets": [0],
            "mRender": function(data, type, row) {
                return '<a href="contract-form.php?contract_id=' + row[2] + '" target="_blank" title="' + row[0] + '">' + row[0] + '</a>';
            }
        },
        {
            "aTargets": [2],
            "mRender": function(data, type, row) {
                return '<input type="text" class="form-control invoice_number" name="invoice_number" id="invoice_number_'+ row[3] +'" placeholder="Invoice Number" required="required" onblur="getvalue(this)">';
            }
        },
        {
            "aTargets": [3],
            "mRender": function(data, type, row) {
                return '<input type="text" class="form-control date" name="invoice_date" id="invoice_date_'+ row[3] +'" placeholder="Invoice Date" required="required" onblur="getdate(this)" >';
            }
        },
        {
            "aTargets": [4],
            "mRender": function(data, type, row) {
                return '<input type="button" class="btn btn-default btn-sm save" value="Save" name="save_bill" id="save_bill" onclick="jQuery(this).save(' + row[2] + ', ' + row[3] + ');">';
            }
        }
    ],
    "initComplete": function(settings, json) {
        $('.date').on('focus', function() {
            $(this).datetimepicker({ format: "<?php echo $jquery_date_format; ?>" });
        });
      }  
});

jQuery（“#table#u billing”）.dataTable({
“sAjaxSource”：“billing db.php？mode=billing_dataTable”，
是的，
“bPaginate”：错误，
“bInfo”：假，
“bFilter”：错误，
“bSort”：错误，
“aoColumnDefs”：[
{
“目标”：[0]，
“mRender”：函数（数据、类型、行）{
返回“”；
}
},
{
“目标”：[2]，
“mRender”：函数（数据、类型、行）{
返回“”；
}
},
{
“目标”：[3]，
“mRender”：函数（数据、类型、行）{
返回“”；
}
},
{
“目标”：[4]，
“mRender”：函数（数据、类型、行）{
返回“”；
}
}
],
“initComplete”：函数（设置，json）{
$（'.date'）。在（'focus'，function（）上{
$（this）.datetimepicker（{格式：}）；
});
}  
});

这里的问题是，我在渲染完成之前定义了datetimepicker。因此，代码不会被执行。渲染完成后，我们必须定义它。因此，答案是：

jQuery("#table_billing").dataTable({
    "sAjaxSource": "billing-db.php?mode=billing_dataTable",
    "bDestroy": true,
    "bPaginate": false,
    "bInfo": false,
    "bFilter": false,
    "bSort": false,
    "aoColumnDefs": [
        {
            "aTargets": [0],
            "mRender": function(data, type, row) {
                return '<a href="contract-form.php?contract_id=' + row[2] + '" target="_blank" title="' + row[0] + '">' + row[0] + '</a>';
            }
        },
        {
            "aTargets": [2],
            "mRender": function(data, type, row) {
                return '<input type="text" class="form-control invoice_number" name="invoice_number" id="invoice_number_'+ row[3] +'" placeholder="Invoice Number" required="required" onblur="getvalue(this)">';
            }
        },
        {
            "aTargets": [3],
            "mRender": function(data, type, row) {
                return '<input type="text" class="form-control date" name="invoice_date" id="invoice_date_'+ row[3] +'" placeholder="Invoice Date" required="required" onblur="getdate(this)" >';
            }
        },
        {
            "aTargets": [4],
            "mRender": function(data, type, row) {
                return '<input type="button" class="btn btn-default btn-sm save" value="Save" name="save_bill" id="save_bill" onclick="jQuery(this).save(' + row[2] + ', ' + row[3] + ');">';
            }
        }
    ],
    "initComplete": function(settings, json) {
        $('.date').on('focus', function() {
            $(this).datetimepicker({ format: "<?php echo $jquery_date_format; ?>" });
        });
      }  
});

jQuery（“#table#u billing”）.dataTable({
“sAjaxSource”：“billing db.php？mode=billing_dataTable”，
是的，
“bPaginate”：错误，
“bInfo”：假，
“bFilter”：错误，
“bSort”：错误，
“aoColumnDefs”：[
{
“目标”：[0]，
“mRender”：函数（数据、类型、行）{
返回“”；
}
},
{
“目标”：[2]，
“mRender”：函数（数据、类型、行）{
返回“”；
}
},
{
“目标”：[3]，
“mRender”：函数（数据、类型、行）{
返回“”；
}
},
{
“目标”：[4]，
“mRender”：函数（数据、类型、行）{
返回“”；
}
}
],
“initComplete”：函数（设置，json）{
$（'.date'）。在（'focus'，function（）上{
$（this）.datetimepicker（{格式：}）；
});
}  
});