Question

在HTML表格中，有一个文本字段，我在其上绑定了Jquery datepicker控件：

$("#CreatedOnValue").datepicker();

工作正常。该表是动态的，用户可以通过单击每行旁边的添加按钮来添加任意数量的行。我正在尝试将datepicker控件绑定到动态行，但它无法正常工作。这是当用户点击行添加按钮时执行的功能：

function addGroupRow(e) {
var rowId = e.parentNode.parentNode.id;
var newindex = getConditionPlacementIndex(rowId);

var row = document.getElementById("advancedSearch").insertRow(newindex);

...

// create table cell of datetime textbox
var cell3 = row.insertCell(3);
cell3.id = row.id+"_cell3";
var strHtml3 = "<INPUT class=\"textbox\" TYPE=\"text\">";
cell3.innerHTML = strHtml3.replace(/!count!/g, count);
$("#" + cell3.id).datepicker();
}

它不起作用，而且日期选择器没有出现在动态文本字段中。有什么建议吗？

感谢。

Answer 1

使用class代替id（给动态生成的textboxes一个班级'textbox'）并执行以下操作：

$('body').on('focus',".textbox", function(){
  $(this).datepicker();
});

Working Demo

Answer 2

我已通过以下代码修改解决了此问题：

var cell3 = row.insertCell(3);
var cell3Id = row.id+"_cell3";
var strHtml3 = "<INPUT class=\"textbox\" TYPE=\"text\" id=" + cell3Id + ">";
cell3.innerHTML = strHtml3.replace(/!count!/g, count);
$("#" + cell3Id).datepicker();

将jquery datepicker绑定到动态行Textfield

2 个答案: