Jquery：表格中的附加行上的Datepicker不起作用

Question

我已經創建了一個表格，其中包含一行中允許用戶選擇日期的列。日期選擇器在靜態文本字段上工作，但在單擊按鈕時生成的日期選擇器不工作（該行被添加，但日期選擇器不會出現在新生成的行上）。

This爲表中的代碼：

<div class="table-responsive"> 
<table class = "table" id="dynamic_admin_add_event_time"> 
<thead> 
<th>Event Date</th> 
<th>Event Start</th> 
<th>Event Ends</th> 
<th></th> 
</thead> 

<tbody> 
<tr> 
<td><input type="text" id="dateEvent" name="admin_add_event_date[]" class="form-control" required></td> 
<td><input type="text" id="startTime" name="admin_add_start_event[]" class="form-control" required></td> 
<td><input type="text" id="endTime" name="admin_add_end_event[]" class="form-control" required></td> 
<td><button type="button" name=button_add_event_time id="add_event_time" class="btn btn-success">Add More Event</button></td> 
</tr> 
</tbody> 
</table> 
</div> 

這是日期選擇的代碼：

$("#dateEvent").datetimepicker({ 
    useCurrent: true, 
    format: "dddd, MMM D YYYY" 
    }); 

而這是一個用於jquery的用於產生行：

$('#add_event_time').click(function(){ 

     i++; 

     $('#dynamic_admin_add_event_time').append(
      '<tr id="row'+i+'">' + 
      '<td><input type="text" id="dateEvent"name="admin_add_event_date[]" class="form-control" required></td>' + 
      '<td><input type="text" id="startTime" name="admin_add_start_event[]" class="form-control" required></td>' + 
      '<td><input type="text" id="endTime" name="admin_add_end_event[]" class="form-control" required></td>' + 
      '<td><button type="button" name="button_remove_event_time" id="'+i+'" class="btn btn-danger btn_remove">Remove Event</button></td>' + 
      '</tr>'); 
}); 

你們可以幫我解決這個問題嗎？謝謝。

Answer 1

試試這個 -

$("#dynamic_admin_add_event_time").on("click", "#dateEvent", function(){ 
    $(this).datetimepicker({ 
     useCurrent: true, 
     format: "dddd, MMM D YYYY" 
    }); 
}); 

Answer 2

按鈕點擊裏面重新定義reinitialize的DateTimePicker負載像

的DateTimePicker分配

$(".dateEvent").datetimepicker({ 
    useCurrent: true, 
    format: "dddd, MMM D YYYY" 
}); 

腳本

$('#add_event_time').click(function(){ 
    i++; 
    $('#dynamic_admin_add_event_time').append(
     '<tr id="row'+i+'">' + 
     '<td><input type="text" id="dateEvent" class="form-control dateEvent" name="admin_add_event_date[]" required></td>' + 
     '<td><input type="text" id="startTime" name="admin_add_start_event[]" class="form-control" required></td>' + 
     '<td><input type="text" id="endTime" name="admin_add_end_event[]" class="form-control" required></td>' + 
     '<td><button type="button" name="button_remove_event_time" id="'+i+'" class="btn btn-danger btn_remove">Remove Event</button></td>' + 
     '</tr>'); 
    $(".dateEvent").datepicker(); 
});