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

Question

我正在创建一个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; 

       } 
      }); 

我试图绑定datetimepicker动态生成的文本框，但我不能这样做。我该怎么做？我应该怎么做才能显示出来？

Answer 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; ?>" }); 
     }); 
     } 
}); 

Answer 2

它应该是这样的：

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