jQuery DatePicker не работает над новой добавленной строкой

Question

У меня есть сетка, которая отображается в виде таблицы. У меня есть кнопка «Добавить» и нажимаю на нее, она создаст новую строку в таблице. Создание строки выполняется с использованием метода «clone (true)» в jQuery. Клонированная строка - это фиктивная строка, которая скрыта в gridview. Я назначил jQuery DatePicker для TextBox. Он отлично работает для существующей строки. Но когда я нажимаю текстовое поле DatePicker для новой добавленной строки, он не открывается. Он открывается для существующей строки. Что может быть проблемой?

Мой код, как:

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

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

Answer 1

Трудно сказать, с вне видеть ваш код, но ..

Это, вероятно, связано с JQuery, используемую для назначения DatePicker на вход называется на странице нагрузки. Следовательно, когда вы клонируете вход, в недавно клонированный вход не подключен датпикер (поскольку он не существовал при загрузке страницы).

После вызова метода клонирования вам необходимо подключить датупик к новому входу.

Answer 2

Я предполагаю, что вы добавили datepicker на document.ready ко всем элементам, которые соответствуют данному селектору. Это не добавляет его к элементам, созданным в будущем. Чтобы сделать это, вы должны проверить jQuery live:

Связывает обработчик события (как клик) для всех текущих - и будущего - совпавшего элемента.

Answer 3

Возможно, клонированный TextBox имеет тот же идентификатор, что и исходный, что путает управление календарем? Если нет, укажите дополнительные коды и возможные сообщения об ошибках.

Answer 4

Вы также можете добавить/форсировать событие для управления процессом. Например, у меня есть одно место, где я добавляю и автозаполняю добавленный элемент. мне удалось «изменить» событие, таким образом (внутри функции .Кнопки()):

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

Затем вызвать функцию внутри обработчика событий изменения для конкретного элемента, который имеет автозаполнение в нем, чтобы добавить его в это item. Есть другие способы, мое обстоятельство, я сделал это вручную, поскольку я манипулирую сложным новым добавлением, а не только строкой таблицы.

/* 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 5

Попробуйте это:

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

Answer 6

Вы должны удалить класс "hasDatepicker" из клонированного элемента первой.

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