JQuery. Применить селектор к каждому полю в динамической форме

Question

У меня есть форма, которая динамически создается с помощью этого плагина jQuery

http://code.google.com/p/jquery-dynamic-form/

Когда я дублирую div , все поля в div дублируются, и в качестве имени поля добавляется -as-docs state- скобки

Я также использую jQueryUI. Я использую плагин datePicker

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

Работает нормально, когда есть только 1 экземпляр этого поля datePicker. Когда я дублирую весь div, поле datePicker также дублируется, и начинаются ошибки

<strong>
inst is undefined
uncaught exception: Missing instance data for this datepicker  

</strong>

1) Как я могу использовать селектор jQuery, который также охватывает все дублированные поля?
2) Как я могу убедиться, что каждое дублированное поле datePicker будет иметь правильный экземпляр и т. Д .?

Заранее большое спасибо,

Answer 1

У меня это заработало, когда я реализовал рекомендации в этой теме :

$('input.hasDatepicker', $clone).removeClass('hasDatepicker');

Если вы используете $.slideDown, кажется, это необходимо сделать после завершения слайда, например:

$clone.slideDown(function() { 
    $('input.hasDatepicker', $clone).removeClass('hasDatepicker');
});

Я надеюсь, что это помогает другим; это меня раздражало!

Answer 2

Я не уверен, что вы используете $.clone() для «дублирования» ваших элементов, но если это так, проблема может быть связана с передачей флага true. например $('div#id').clone(true). Это клонирует элемент, а также присоединенные к нему события (и его дочерние элементы). Однако использование этого в элементах пользовательского интерфейса jquery может испортить несколько вещей, поэтому лучше переопределить пользовательскую информацию элемента после его дублирования.

Скорее всего, вы не управляете этим с такой гранулярностью. Более или менее, вы сталкиваетесь с проблемами, потому что jqueryui не знает об этих дублированных полях формы. Я бы предложил удалить «дублированную» версию поля datepicker и заменить его новым полем datepicker.

Примерно так:

// code to duplicate form
// ...
// Now replace the element with one just like it but without any events
$('#newDupedForm')
    .find('.datefield')
    .replaceWith(
        $(this).clone(false).datepicker(options)
    );

Это должно избавить от любых ссылок на старый указатель даты jquery ui из другого элемента и создать новый, однако, если что-то мне не хватает, вы всегда можете создать элемент ввода с нуля и выполнить replaceWith с этим.