无法将日期选择器应用于使用 .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 class。我知道问题与事件委托有关，但我似乎无法理解它。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

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

试试这个：

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

Answer 2

尝试使用 jQuery 的 delegate() 代替：

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

我在动态加载元素时遇到了这个问题。更具体地说，当 DOM 加载时您尝试访问的元素不存在时，绑定将失败。

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

Cannot apply date picker to field on html page added to application using .load

javascript

jquery

datepicker

event-delegation