Question

我有一个gridview作为一个表格呈现。我有一个“添加”按钮并单击它，它将在表格中创建一个新行。在jQuery中使用“clone（true）”方法完成行创建。克隆的行是一个隐藏在gridview中的虚拟行。我为TextBox分配了jQuery DatePicker。它适用于现有行。但是，当我为新添加的行单击DatePicker文本框时，它不会打开。它为现有行打开。可能是什么问题？

我的代码就像：

$("input[name $= 'txtDateOrdered']").datepicker({

        showButtonPanel     :   true
    ,   showOn              :   'button'
    ,   buttonImageOnly     :   true
    ,   buttonImage         :   '../../Image/calendar.gif'
});

Answer 1

您必须先从克隆元素中删除“hasDatepicker”类。

$(".selector").removeClass('hasDatepicker').datepicker({
        showButtonPanel     :   true
    ,   showOn              :   'button'
    ,   buttonImageOnly     :   true
    ,   buttonImage         :   '../../Image/calendar.gif'
});

Answer 2

很难看出你的代码但是......

这可能是由于在页面加载时调用了用于将datepicker分配给输入的jquery。因此，当您克隆输入时，新克隆的输入没有连接到它的datepicker（因为它在页面加载时不存在）。

调用克隆方法后，您需要将日期选择器连接到新输入。

Answer 3

我假设您将document.ready上的datepicker添加到与给定选择器匹配的所有元素。这不会将其添加到将来创建的元素中。为此，您应该查看jQuery live：

将处理程序绑定到事件（如点击）了解所有当前和未来 - 匹配元素。

Answer 4

也许克隆的TextBox与原始文件框具有相同的ID，从而混淆了日历控件？如果没有，请提供更多代码和可能的错误消息。

Answer 5

您还可以添加/强制事件来管理流程。举个例子，我有一个地方可以添加并自动完成添加的项目。我管理“更改”事件（在.change（）函数内）：

$(this).change(); // fire change event (to be used in other user controls)

然后我在一个更改事件处理程序中调用一个函数，用于具有自动完成功能的特定项目，以将其添加到该项目。还有其他方法，我的情况表明我手动执行此操作，因为我正在操作复杂的新添加的部分，而不仅仅是表格行。

/* apply autocomplete function */
function myAddAuto()
{
    $(".cptEntryArea").autocomplete("mywebservice/myService.asmx/GetMyAutocomplete", {
        dataType: 'json',
        data: {},
        type: "POST",
        contentType: "application/json; charset=utf-8",
        parse: function(data) { return myAutocompleteJSONParse(data); },
        maxRows: 100,
        formatItem: function(row) { return row["Description"] + ' (' + row["MyCode"] + ')' },
        minChars: 2,
        matchSubset: false,
        scrollHeight: 100,
        width: 300
    });
};

还有其他方法，但基本前提是相同的 - 将处理程序添加到添加到表中的行中新添加的实体。

Answer 6

试试这个：

 $("row-you-are-cloning").clone().appendTo("your-table").datepicker({
    showButtonPanel     :   true,
    showOn              :   'button',
    buttonImageOnly     :   true,
    buttonImage         :   '../../Image/calendar.gif'
});

jQuery DatePicker无法处理新添加的行

6 个答案: