JQuery 日期选择器在 Laravel 的动态输入表单中不起作用

Question

我在 Laravel-5.8 中有一个使用 JQuery Datepicker 的代码。该应用程序是动态输入表单，当您单击添加（+）按钮时，它会添加控件数组。

<table class="table table-bordered">
 <thead>
   <tr>
     <th scope="col">Start Date<span style="color:red;">*</span></th>
     <th scope="col">End Date<span style="color:red;">*</span></th>
     <th scope="col" width="8%"><a class="btn btn-info addRow"><i class="fa fa-plus"></i></a></th>
   </tr>
 </thead>

 <tbody>
    <td>
       <input id="startDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date[]" class="form-control">
    </td>
    <td>
       <input id="endDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="end_date[]" class="form-control">
    </td>
 </tbody>
 </thead>
</table>


<script src="{{ asset('theme/adminlte3/plugins/jquery/jquery.js') }}"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{ asset('theme/adminlte3/plugins/jquery-ui/jquery-ui.js') }}"></script>

<script type="text/javascript">
        $(function () {
            $( "#startDate" ).datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,     
                showAnim: 'slideDown',
                duration: 'fast',                    
                yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),

            });
            
            $( "#endDate" ).datepicker({
                dateFormat: 'dd-mm-yy',
                changeMonth: true,
                changeYear: true,     
                showAnim: 'slideDown',
                duration: 'fast',                    
                yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
            });                
     });
</script>       

   <script type="text/javascript">
    $(document).ready(function(){
        $('.addRow').on('click', function () {
   var isHod = {{ Auth::user()->is_hod == 0 ? 0 : 1 }};
    var numRows = $('.activity').length

    if (numRows<4) {
        addRow();
    }
        });

        function addRow() {
            var addRow = '<tr>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input id="startDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date[]" class="form-control"></div></td>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input id="endDate" type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="end_date[]" class="form-control"></div></td>\n' +
' <td><a   class="btn btn-danger remove"> <i class="fa fa-times"></i></a></td>\n' +
' </tr>';
            $('tbody').append(addRow);
            addRemoveListener();
        };
    addRemoveListener();
});

function addRemoveListener() {
$('.remove').on('click', function () {
        var l =$('tbody tr').length;
        if(l==1){
            alert('you cant delete last one')
        }else{

            $(this).parent().parent().remove();

        }

    });
 }

</script>

默认的 JQuery 日期选择器工作正常。但是当我点击 Add new (+) 在数组上添加新的时。当我点击 start_date 和 end_date 时，没有日期。

我该如何解决这个问题？

Answer 1

问题在于您初始化日期选择器的方式。

您正在使用匿名函数来注册日期选择器

$(function () {
        $( "#startDate" ).datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,     
            showAnim: 'slideDown',
            duration: 'fast',                    
            yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),

        });
        
        // ...            
 });

它适用于函数运行时页面上已经存在的元素，但是您在初始化后动态地将元素添加到页面中，因此不会在此处注册日期选择器。

您可以在此 SO 答案中查找如何注册 datepicker 以动态添加元素： https://stackoverflow.com/a/10433307/6813537

-- 编辑

在您的情况下，您需要做的第一件事是删除 ID start_date 和 end_date，而是添加类似数据标签的内容，因为不允许将相同的 ID 多次添加到同一页面。

因此您可以更改代码以添加新行（注意输入中的data-datepicker"）：

    function addRow() {
            var addRow = '<tr>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input  type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="start_date[]" class="form-control" data-datepicker></div></td>\n' +
' <td><div class="input-group"><div class="input-group-prepend"><span class="input-group-text"><i class="far fa-calendar-alt"></i></span></div><input  type="text" placeholder="dd/mm/yyyy" readonly autocomplete="off" name="end_date[]" class="form-control" data-datepicker></div></td>\n' +
' <td><a   class="btn btn-danger remove"> <i class="fa fa-times"></i></a></td>\n' +
' </tr>';
            $('tbody').append(addRow);
            addRemoveListener();
        };

您还应该将 html 中的 id= 部分更改为 data-datepicker。

现在您可以通用地定位应该触发日期选择器的组件，因此您可以将初始化函数更改为

$(function () {
        $('body').on('focus',"[data-datepicker]", function(){
                 $(this).datepicker({
                         dateFormat: 'dd-mm-yy',
                         changeMonth: true,
                         changeYear: true,     
                         showAnim: 'slideDown',
                         duration: 'fast',                    
                         yearRange: new Date().getFullYear() + ':' + new Date().getFullYear(),
                 });
        });​           
 });

解释：

我们现在在 body 对象上注册一个全局事件侦听器，它侦听 focus 事件，当您输入文本输入时触发该事件。 on 函数的第二个参数允许我们仅过滤我们感兴趣的元素。在您的情况下，具有属性data-datepicker 的元素。然后我们在该对象上初始化日期选择器。

您可以在 jQuery 文档 https://api.jquery.com/on/ 中阅读有关 on 函数的所有信息