Question

我在其中创建了一个表，其中包含一行中允许用户选择日期的列。 datepicker适用于静态文本字段，但是在单击按钮生成的字段上，它不起作用。（附加了行，但是日期选择器不会出现在新生成的行上。）

这是表格的代码：

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

这是datepicker的代码：

  $("#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

按钮内部点击重新定义到reinitialize datetimepicker加载，如

datetimepicker assign

$(".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();
});

Answer 2

试试这个 -

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

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

2 个答案: