Question

我需要创建动态过滤器，动态添加/删除行。

它包含一个下拉框。根据所选的下拉框值，我创建了一个动态<TD>，其中可能包含文本字段或下拉列表。

如果是文本字段，那么我必须为该文本字段添加日期选择器。

我已完成此操作，但动态生成的文本字段的日期选择器除外如果您要创建100行，则所有行的文本字段名称应相同。

如何为动态生成的文本字段添加datepicker？

Answer 1

我有同样的问题。您需要将DatePicker重新绑定到动态添加的行。日期选择器将hadDatePicker类与动态行关联。

所以你需要删除它并重新绑定。

像这样 -

    jQuery('.date-pick').removeClass('hasDatepicker').datepicker({
    dateFormat: 'mm-dd-yy'
    });

此致蒂娜·阿格拉瓦尔

Answer 2

实际上我确实使用了@Tina Agrawal提供的解决方案但是从现在起，当我从日历中选择日期时，我再次点击并重新选择。如果我点击下个月，它将转到1900-01-01。

这太奇怪了......

经过两个小时的试验，错误和研究。

我只是这样做了：

$('.date-pick').live('click', function(){
 $('.date-pick').datepicker();
});

好吧。

Answer 3

我有同样的问题并以不同的方式解决了它。虽然我不太清楚它为什么起作用，因为我对jquery很新。我编写了以下内容，它迭代了具有类“class_date”的整个控件集，并将datepicker控件重新绑定到它。

$(".class_date").removeClass('hasDatepicker').datepicker();

Answer 4

Tirst将一个class属性作为“date”添加到您的输入或div。

动态添加文字输入后，必须再次调用$('.date').datePicker()以将datePicker绑定到新输入或div。

Answer 5

我遇到了类似的问题，当我向表中动态添加新行时，新行中的日期选择器字段（动态添加到DOM中的任何行）都在更新我的初始行日期选择器字段。

如上所述删除hasDatepicker类不足以解决我的问题，可能就像我使用.clone（）创建动态添加的行一样。

克隆行时的解决方案是删除克隆的输入字段，重新创建它们，将它们添加到我新克隆的表行中，然后重新启动日期选择器

例如：

//Remove exisiting cloned input fields
new_row.find("td.date input").remove();

//Create new input fields and append to table td
var date_tds = new_row.find("td.date");
$('<input />', {"name":"gStartDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[0]);
$('<input />', {"name":"gEndDates["+n_array_pos+"]","type":"text"}).appendTo(date_tds[1]);

//Re-initiate datepicker on the input fields                    
new_row.find("td.date input").datepicker({
    dateFormat:"dd-mm-yy",
    minDate:StartDate,
    maxDate:EndDate
});

Answer 6

使用JQuery Live访问动态创建的DOM。

http://api.jquery.com/live/

你可以附上选择器。

http://jqueryui.com/demos/datepicker/

Answer 7

应该使用“.on”而不是直播 - 请参阅 http://api.jquery.com/on/

动态JQuery日期选择器代码

7 个答案: