1

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

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

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

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

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

编辑:

很简单:我只是添加了:

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

到调用新字段的代码。至于最优解我不知道,有js专业的都可以评论一下,我扩大搜索词后发现这里还有很多类似的问题。然而,我现在正在做的事情对我来说已经足够好了。

4

1 回答 1

0

对于动态添加的元素,请使用 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属性来设置引导日期选择器。因为在这种情况下 datepicker 以 Bootstrap 方式延迟初始化。

于 2014-09-12T14:01:04.777 回答