javascript - 页面加载后添加的类字段的日期选择器初始化

Question

我有一些字段，可以在页面加载后添加多个额外字段(想想工作简历上的教育和工作经验字段)。我正在使用this .

我可以在第一个字段上添加日期选择器，但后续添加的字段不会访问日期选择器，尽管是原始字段的克隆/基本重复。我猜测日期选择器仅在页面加载时初始化或仅针对页面上的一个类进行初始化。

所以在页面上我初始化日期选择器:

$('.input-append.date').datepicker();

用于此类封装的表单代码块。初始页面加载正常；如果出现错误并且页面重新加载之前输入的多个字段，也可以(对于任何错误返回的所有字段都有一个日期选择器)。但是，使用另一个向表单添加新字段的 js 函数，其他新字段无法访问日期选择器。我现在不知道如何做到这一点，也许有更多经验/智慧的人可以为我提供提示。

编辑:

足够简单:我只是添加了:

 $('.input-append.date').datepicker();

到调用新字段的代码。至于是否是最佳解决方案，我不知道，任何专门研究 js 的人都可以对此发表评论，并且当我扩展搜索词时，我发现这里还有许多其他类似的问题。然而，对于我现在正在做的事情来说已经足够好了。

Answer 1

对于动态添加的元素，请使用 data-provide="datepicker"属性。它将被延迟初始化。例如，如果输入字段出现在 ajax 响应中并加载到容器 div 中。所以在这种情况下:

<input type="text" data-provide="datepicker" />

所以当你加载这个ajax时，它会在cotainer div中响应，就像

$('#container-div').html(ajax_response);

这会起作用。

以同样的方式，如果您通过 jquery 创建一个元素并将其附加到某个容器(我认为这发生在您的情况)，例如您有一个创建文本框和附加的函数它到某个容器 div，并且在某个元素的单击事件(假设它是按钮)上调用此函数。 data-provide 属性再次解决了这个问题。例如

function createTextBox(){
    var t = $('<input>').attr('data-provide','datepicker');
    $('#container-div').append(t);
}

这个函数在某些按钮的单击事件上被调用，如下所示:

$(document).ready(function(){
      $('#someBtn).click(createTextBox);
});

简而言之，无论动态元素是作为字符串出现在ajax响应中还是通过jquery创建，只需使用data-provide属性来设置 Bootstrap 日期选择器。因为在这种情况下，日期选择器是以 Bootstrap 方式延迟初始化的。