javascript - 无法将日期选择器应用于使用 .load 添加到应用程序的 html 页面上的字段

Question

我正在尝试创建一个单页面应用程序，该应用程序使用 jQuery 中的 .load() 函数将应用程序的各个页面加载到 #container 中。

页面中加载的按钮是使用 $.ajax 和 $.each 循环动态生成的:

$.each(result, function(i, item) {
   $("#menu").append("<li id='"+item.filename+"' class='col-md-12'><span id='"+item.filename+"_link'>" + item.condition_name + "</span></li>");                         
 });

在我的一个页面上有一个表格。我想将日期选择器添加到表单中的输入字段之一。

<span class="field"><label for="date">Choose Date: </label>
    <input type="date" id="reading_date" name="reading_date" class="date">
</span>

我尝试在加载页面的单击函数中的 jQuery 中执行此操作:

$(document.body).on("click", "#type1diabetes_link", function(event){
    event.preventDefault();
    $("#content").load("type1diabetes.html");
    $('.date').datepicker();
});

无论我尝试做什么，日期选择器都不会加载。我似乎无法访问 .date 类。我知道这个问题与事件委托(delegate)有关，但我似乎无法理解它。

任何帮助都将不胜感激。谢谢

Answer 1

程序不会等待.load()完成就运行下一行代码。因此，您可以在内容更新之前调用 datepicker 函数。根据 jquery 文档，您可以添加一个回调函数，该函数在 .load() 完成后运行。这是你应该使用日期选择器的时候。

试试这个:

$(document.body).on("click", "#type1diabetes_link", function(event){
    event.preventDefault();
    $("#content").load("type1diabetes.html", function() {
        $('.date').datepicker();
    });
});