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>

我试图在加载页面的click函数中在jQuery中执行此操作：

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

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

任何帮助都将非常感谢。谢谢

Answer 1

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

请改为尝试：

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

Answer 2

尝试使用jQuery＆＃39; delegate()代替：

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

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

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

2 个答案: