Datepicker - 不会附加到动态元素

Question

我知道这个问题之前已经在 SO 上提出并回答了，但是这些解决方案没有成功地让它工作，或者我错过了一个可以工作的解决方案

index.php

<id="fupdiv"></div>
<input name="non-dynamic-test-element" type="text" class="datepicker">
<button id="addticket">Open Dynamic Form</button>

Jquery：

$(document).ready(function(){
$( ".datepicker" ).datepicker();
$(document).on('click','#addticket', function() {
    $("#fupdiv").load('blocks/form-followup.php');
    $("#fupdiv").fadeIn();
    $( ".datepicker" ).datepicker("refresh");
                                                });
});

form-followup.php

<div>
<label> Should get datepicker on click</label> <input type="text" class="datepicker" id="dynamic-input">
</div>

问题： 单击“非动态测试元素”输入会正确打开 DatePicker。单击加载的“动态元素”输入不会，控制台中不会引发错误，我尝试了几种不同的方法将日期选择器附加到动态元素。据我了解，使用 .on() 方法并在加载后绑定 datepicker 应该可以工作吗？任何帮助将不胜感激。

Answer 1

AJAX 调用是异步的，因此可以在元素放入 DOM 之前执行刷新，因此没有绑定。所以绑定应该在加载回调中刷新。

$("#fupdiv").load('blocks/form-followup.php',function(){
    $( ".datepicker" ).datepicker();
});