jQuery DatePicker 不适用于新添加的行答案

【问题标题】：jQuery DatePicker not working on newly added rowjQuery DatePicker 不适用于新添加的行
【发布时间】：2009-11-03 13:45:55
【问题描述】：

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

我的代码是这样的：

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

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

【问题讨论】：

你有链接吗？您确定错误控制台中没有错误吗？
你应该发布一些源代码，甚至更好，一个工作示例。

标签： jquery

【解决方案1】：

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

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

【讨论】：

我也遇到了同样的问题，这是为我解决问题的关键。谢谢米娅。

【解决方案2】：

没有看到你的代码很难说但是..

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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
    });
};

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

【讨论】：

【解决方案6】：

试试这个：

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

【讨论】：